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

.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>

Answer 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 width="24" height="24"/>
  </svg>
  <div>ALIGNED SVG</div>
</div>
<div class="container">
  <div class="item">
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <rect width="24" height="24"/>
    </svg>
  </div>
  <div>MISALIGNED SVG</div>
</div>

css

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

    }

包裹在div中时，SVG内部弯曲未对齐

2 个答案: