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

Question

我想要一个未知大小的 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 width="24" height="24"/>
  </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 width="24" height="24"/>
        </svg>
    </div>
    <div>MISALIGNED ICON</div>
</div>

这是CodePen的链接

---

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

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

Answer 1

内部div必须显示为flex内部 div也

检查这个演示。

.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 width="24" height="24"/>
  </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 width="24" height="24"/>
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>