如何將中心對齊到 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>