Question

我有以下代码

.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和margin：0自动但有效时有效我不确定这是否是正确的居中方法。你们能解释一下我吗？预先感谢！

Answer 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;
  /*margin: 0 auto;
    display: block; */

}

.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>

Answer 2

这是SVG元素的属性，按标准，它们的节点（视口和视框）从左上角开始，而不是在SVG元素的中心。因此，每当您尝试使向量居中时，它都不适合像图像一样。

您可以尝试添加：

    if TRadioGroup1.ItemIndex = 0 then
    RedDisplay.Lines.add('Mr') //This displays Mr in the richedit
    else
    if TRadioGroup1.ItemIndex = 1 then
  RedDisplay.Lines.Add('Ms') ;  // this displays Ms in the richedit

    //You can add an extra else if ,if there is another button in the radioGroup.
```

或者，将select distinct ALT_SRC_HOST as col1 , NULL as col2 from ATABLE union all select distinct NULL as col1 , SOURCE_IP as col2 from ATABLE添加到容器display: block; margin: auto;

此外，您可以尝试将text-align: center;添加到<div>标签

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

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

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

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

2 个答案: