我有一个SVG,我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用,它就像左距为0一样(默认值)。

有人知道误差是多少吗?


当前回答

<div align="center">
  /* svg code */
</div>

这个代码中心SVG在div元素。

其他回答

Flexbox是另一种方法:添加

.container { 显示:flex; justify-content:中心; }

并将.container类添加到包含svg的div中。

确保你的CSS如下:

margin: 0 auto;

即使您说您已经将左和右设置为auto,您可能会放置一个错误。当然我们不知道,因为你没有给我们看任何代码。

HTML:

<div class="wrap-center">
    <svg width="20px" height="20px"></svg>
</div>

CSS:

.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div align="center">
  /* svg code */
</div>

这个代码中心SVG在div元素。

SVG默认是内联的。

添加display: block到它,然后margin: auto将按预期工作。

或者根据你的布局,你可能想保持SVG内联,并在父元素上设置text-align: center。

作为另一种选择,您可以使用flex或网格布局将SVG居中在父元素上。