css 在div中 Package 时，flex中的SVG未对齐

lqfhib0f 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(140)

我想要一个未知大小的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 Package 在另一个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元素，也无法设置 Package 器div的高度以匹配SVG的高度。

在另一个div中 Package SVG时，如何对齐SVG和文本？

css

来源：https://stackoverflow.com/questions/54764391/svg-inside-flex-misaligned-when-wrapped-in-div

2条答案

按热度按时间

acruukt91#

内部div也必须显示为flex
看看这个demo。

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

个字符

赞(0）回复(0）举报 2024-01-09

oxiaedzo2#

只需将flex和align添加到div类中即可。
https://codepen.io/anon/pen/zeeegz
联系我们

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

字符集
中文（简体）

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

    }

型

赞(0）回复(0）举报 2024-01-09

我来回答

css 在div中 Package 时，flex中的SVG未对齐

2条答案

相关问题

热门标签

最新问答