为什么我的 svg 不在 div 容器内居中？答案

【问题标题】：Why my svg is not centered inside div container?为什么我的 svg 不在 div 容器内居中？
【发布时间】：2019-09-29 18:01:34
【问题描述】：

我有以下代码

.services-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.services-container svg {
    width: 70px;
  /*margin: 0 auto;
    display: block; */

}

.services-branding {
    width: 300px;
}

.services-branding figcaption {
    text-align: center;
}

.services-branding p {
    text-align: center;

}

  <div class="services-container">
        <figure class="services-branding">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="120"
            height="124"
            viewBox="0 0 120 124"
          >
            <g>
              <g>
                <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
                <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
                <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
                <g>
                  <path
                    fill="#daeaf2"
                    d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
                  />
                </g>
              </g>
            </g>
          </svg>
          <figcaption>branding</figcaption>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh.
          </p>
        </figure>
      </div>

我的问题是为什么 svg 不像其他元素一样居中？它仅在我添加到 svg display:block and margin: 0 auto 但时才有效我不确定这是否是正确的居中方法。你们能给我解释一下吗？预先感谢！

【问题讨论】：

标签： html css svg flexbox

【解决方案1】：

这是因为text-align: center 不会将<svg> 居中。您需要将flexbox 属性应用于<svg> 的直接父级，即.services-branding，如下所示：

.services-container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.services-container svg {
  width: 70px;
}

.services-branding {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.services-branding figcaption {
  text-align: center;
}

.services-branding p {
  text-align: center;
}

<div class="services-container">
  <figure class="services-branding">
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="124" viewBox="0 0 120 124">
      <g>
        <g>
          <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
          <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
          <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
          <g>
            <path
              fill="#daeaf2"
              d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
            />
          </g>
        </g>
      </g>
    </svg>
    <figcaption>branding</figcaption>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
    </p>
  </figure>
</div>

【讨论】：

【解决方案2】：

这是 SVG 元素的一个属性，它们的节点点（视口和视图框）是标准的，从左上角开始，而不是在 SVG 元素的中心。这就是为什么每当您尝试将矢量居中时，它都不像图像那样适合。

您可以尝试添加：

display: block;
margin: auto;

或者，将text-align: center; 添加到容器<div>

另外，您可以尝试将preserveAspectRatio="xMaxYMax meet" 添加到<svg> 标记

我建议您将不同大小的矢量用作图像，并在构建页面代码时根据您的需要相应地使用它们，因为在 CSS 上操作图像而不是矢量更容易。

更多关于向量的信息：https://www.w3schools.com/graphics/svg_intro.asp

关于preserveAspectRatio：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

【讨论】：