我想要一个未知大小中心的 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 和文本?
最佳答案
内部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>
关于html - 包裹在 div 中时 SVG 内部 flex 未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54764391/