如何将 SVG 在 Div 内居中：为什么 Margin: Auto 不起作用以及如何修复它？

如何在 Div 内完美对齐 SVG

将 SVG（可缩放矢量图形）添加到 div 时，对齐至关重要它准确地实现了所需的布局。以下是有关此主题的常见问题和解决方案：

问题：

我尝试将 SVG 置于 div 中，但它无法正常工作。 div 的宽度为 900px，SVG 的宽度为 400px。我已将 SVG 的 margin-left 和 margin-right 设置为 auto，但它的表现就好像左边距为 0。这可能是什么问题？

答案：

在 CSS 中，SVG 默认是内联元素，这意味着它们的行为类似于文本。因此，它们不会像块元素那样响应边距设置。要纠正这个问题，您需要将 display: block 添加到 SVG 以使其成为块元素。这将允许 margin: auto 按预期工作，使 SVG 在 div 内居中。

或者，根据您的布局，您可以保持 SVG 内联并在父元素上设置 text-align: center 。这会将所有内联元素（包括 SVG）与父元素的中心对齐。

另一个选项是利用父元素上的 Flexbox 或网格布局，并使用居中属性来对齐其中的 SVG。这种方法在控制布局方面提供了更大的灵活性，并且在各种场景中都很有用。

以上是如何将 SVG 在 Div 内居中：为什么 Margin: Auto 不起作用以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！