我有一个SVG，我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用，它就像左距为0一样(默认值)。
有人知道误差是多少吗?
当前回答
你还可以这样做:
<center> <div style="width: 40px; height: 40px;"> <svg class="sqs-svg-icon--social" viewBox="0 0 64 64"> <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"> <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%"> <path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z" /> </svg> </use> </svg> </div> </center>
其他回答
如果你使用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>
确保你的CSS如下:
margin: 0 auto;
即使您说您已经将左和右设置为auto，您可能会放置一个错误。当然我们不知道，因为你没有给我们看任何代码。
SVG默认是内联的。
添加display: block到它，然后margin: auto将按预期工作。
或者根据你的布局，你可能想保持SVG内联，并在父元素上设置text-align: center。
作为另一种选择，您可以使用flex或网格布局将SVG居中在父元素上。
上面的答案看起来不完整，因为他们只是从css的角度谈论。
SVG在视口中的定位受到两个SVG属性的影响
viewBox:定义svg要覆盖的矩形区域。 preserveAspectRatio:定义在哪里放置viewBox wrt视口，以及如何在视口改变时拉伸它。
点击这个来自codepen的链接了解详细描述
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
把这两行放到style.css中 在指定的div类中。
display: block;
margin: auto;
然后尝试运行它，您将能够看到SVG现在在中心对齐。
