如何将中心对齐到 Svg 图标

Question

我有一个 svg 图标，左对齐，我想修复对齐中心，我使用此代码但它不起作用。

.parent{
display: flex;
align-items: center;
font-size: 13px;
}
span{
margin-right:10px
}

查看 svg 图标，它不在中心

顺便说一句，我使用 flex：

svg{ 
display: flex;
align-items: center;
justify-content:center;
}

我也使用 text-align:center 但它不起作用

Answer 1

align-items: center将使所有子项垂直居中对齐。

justify-content:center将所有孩子水平居中对齐。

 body { font-size: 5em; font-family: 'Segoe UI', sans-serif; } svg { height: 1em; /* optional: additional vertical offset */ transform: translateY(1%); }.parent { display: flex; align-items: center; justify-content: center; } span { margin-right: 10px }

 <div class="parent"> <span> Example text </span> <svg class="icon icon-home" id="icon-home" viewBox="0 0 34 48"> <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z"></path> </svg> </div>

如果您的图标没有按要求对齐，您可以通过transform: translateY(X%)添加一些垂直偏移。 视觉 alignment 也取决于您的 svg viewBox 。

您的图标不需要任何 flex 属性——对 svg 子元素的布局没有任何影响。

进一步阅读： css-tricks：Flexbox 的完整指南

Answer 2

如果你的意思是垂直居中对齐，你可以使用vertical-align: middle样式属性。 这将使 svg 垂直对齐。

Answer 3

首先，你应该重命名你的 css 类我在你的检查元素上没有看到.parent class

而且我认为处理这个问题的最佳方法是将父级添加到您的 svg 并让父级处理定位

例如：
CSS

.parent-svg {
 display:flex;
 justify-content:center;
 align-items:center;
}

HTML

<div class="col">
<span>Text</span>
<div class="parent-svg">
 <svg />
</div>