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

有人知道误差是多少吗?


当前回答

SVG默认是内联的。

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

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

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

其他回答

读了上面的内容,svg默认是内联的,我只是在div中添加了以下内容:

<div style="text-align:center;">

这招对我很管用。

纯粹主义者可能不喜欢它(这是一张图片,不是文本),但在我看来,HTML和CSS在居中位置上搞砸了,所以我认为这是合理的。

谢谢你的回答,但只是补充你可以使用px而不是%

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

对我来说,修正是添加边际:0 auto;到包含<svg>. xml的元素上。

是这样的:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

上面的答案对我都没用。如果SVG来自谷歌图标,请尝试以下方法:

display: inline-block;
width: 24px;
vertical-align: middle;

这些答案对我都没用。我是这么做的。

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);