我有一个SVG,我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用,它就像左距为0一样(默认值)。
有人知道误差是多少吗?
我有一个SVG,我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用,它就像左距为0一样(默认值)。
有人知道误差是多少吗?
当前回答
SVG默认是内联的。
添加display: block到它,然后margin: auto将按预期工作。
或者根据你的布局,你可能想保持SVG内联,并在父元素上设置text-align: center。
作为另一种选择,您可以使用flex或网格布局将SVG居中在父元素上。
其他回答
确保你的CSS如下:
margin: 0 auto;
即使您说您已经将左和右设置为auto,您可能会放置一个错误。当然我们不知道,因为你没有给我们看任何代码。
上面的答案看起来不完整,因为他们只是从css的角度谈论。
SVG在视口中的定位受到两个SVG属性的影响
viewBox:定义svg要覆盖的矩形区域。 preserveAspectRatio:定义在哪里放置viewBox wrt视口,以及如何在视口改变时拉伸它。
点击这个来自codepen的链接了解详细描述
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
对我来说,修正是添加边际:0 auto;到包含<svg>. xml的元素上。
是这样的:
<div style="margin: 0 auto">
<svg ...</svg>
</div>
如果你使用bootstrap,把你的代码放在这个div之间:
<div class="text-center ">
<i class="fa fa-twitter" style="font-size:36px "></i>
<i class="fa fa-pinterest" style="font-size:36px"></i>
<i class="fa fa-dribbble" style="font-size:36px"></i>
<i class="fa fa-instagram" style="font-size:36px"></i>
</div>
我必须使用
display: inline-block;