包裹在div中时，flex内部的SVG未对齐

Posted 2023-03-06

【中文标题】包裹在div中时，flex内部的SVG未对齐

【英文标题】：SVG inside flex misaligned when wrapped in div

【发布时间】：2019-07-12 20:20:02

【问题描述】：

我想要一个未知大小的 SVG 图标，中心对齐到某些文本的左侧。我最好使用 flex。

这是 SVG 和文本容器的 CSS：

.container 
    background-color: pink;
    display: flex;
    align-items: center;
    margin: 10px;
    width: 200px;

---

这很好用：

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect  />
  </svg>
  <div>ALIGNED ICON</div>
</div>

但是，当我将 SVG 包装在另一个 div 中时，div 的高度变得不必要地大，导致 SVG 和文本错位：

<div class="container">
    <div>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <rect  />
        </svg>
    </div>
    <div>MISALIGNED ICON</div>
</div>

这是CodePen的链接

---

实际上，这是一个 React 项目，我使用我无法控制或不知道其大小的外部 SVG 组件。因此，我不能将任何样式直接应用于 SVG 元素，也不能将包装器 div 的高度设置为与 SVG 的高度匹配。

将 SVG 包装到另一个 div 中时如何对齐 SVG 和文本？

【参考方案1】：

内部 div 也必须显示为flex

.container 
  background-color: pink;
  display: flex;
  align-items: center;
  margin: 10px;
  width: 200px; 

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect  />
  </svg>
  <div>ALIGNED SVG</div>
</div>
<div class="container">
  <div style="display: flex;">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <rect  />
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>

【讨论】：

谢谢，这行得通。关于为什么需要这样做的任何文档？

【参考方案2】：

只需添加 flex 并对齐到该 div 类。

https://codepen.io/anon/pen/zeeegz

html

<div class="container">
  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <rect  />
  </svg>
  <div>ALIGNED SVG</div>
</div>
<div class="container">
  <div class="item">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <rect  />
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>

css

 .container 
      background-color: pink;
      display: flex;
      align-items: center;
      margin: 10px;
      width: 200px;
    
    .item
      display: flex;

    

【讨论】：

谢谢，这行得通。关于为什么需要这样做的任何文档？