与显示垂直对齐：inline-flex；结合SVG和文本[重复]

Posted 2023-03-07

【中文标题】与显示垂直对齐：inline-flex；结合SVG和文本[重复]

【英文标题】：Vertical alignment with display: inline-flex; combined with SVG and text [duplicate]

【发布时间】：2021-10-03 12:13:36

【问题描述】：

我在这里设置了 StackBlitz（我正在使用 Tailwind）：

https://stackblitz.com/edit/tailwindcss-m77ntn?file=index.html

我有一个这样的按钮：

<div id="button1" class="bg-gray-500 px-2 py-2 inline-flex space-x-2">
  <div class="w-5">
    &#10003;
  </div>
  <div>
    Yay
  </div>
</div>

这将项目在包含的 div 中彼此相邻。

但是，当我将此 div 放在另一个 div 旁边时 - 完全相同，但包含 SVG 而不是 HTML 实体 - 然后按钮未对齐，正如您在 Stackblitz 示例中看到的那样。

<div id="button3" class="bg-gray-500 px-2 py-2 inline-flex space-x-2">
  <div class="w-5">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke- d="M5 13l4 4L19 7"></path>
    </svg>
  </div>
  <div>
    Doh
  </div>
</div>

见：

我希望所有 div 均等对齐。

我知道这是由于包含“刻度”的 div 的高度以及我使用 SVG 的地方我没有设置任何 HTML 字符的行高

【问题讨论】：

align-top 到您的按钮

@temaniAfif - 不错

【参考方案1】：

只需将flex pt-1 类添加到#app 元素

您可以更新您的 HTML

<div id="app" class="flex pt-1">

    <div id="button1" class="bg-gray-500 px-2 py-2 inline-flex space-x-2">
      <div class="w-5">
        ✓
      </div>
      <div>
        Yay
      </div>
    </div>

    <div id="button1" class="bg-gray-500 px-2 py-2 inline-flex space-x-2">
      <div class="w-5">
        &nbsp;
      </div>
      <div>
        Yay
      </div>
    </div>

    
    
    <div id="button3" class="bg-gray-500 px-2 py-2 inline-flex space-x-2">
      <div class="w-5">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke- d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div>
        Doh
      </div>
    </div>
  </div>