如何将中心对齐到 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

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

Answer 2

首先，您应该重命名 css classes 我在您检查的元素

上没有看到 .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>

Answer 3

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%) 添加一些垂直偏移。视觉对齐还取决于您的 svg viewBox.

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

进一步阅读：css-tricks: A Complete Guide to Flexbox

如何将中心对齐到 Svg 图标

How to align Center to Svg icon

html

css

flexbox

reactjs