我有一个SVG，我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用，它就像左距为0一样(默认值)。
有人知道误差是多少吗?
当前回答
如果你使用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>
其他回答
只需将容器视为flex，并将svg项以flex属性居中即可:
<div classname='icon'>
<svg>.....</svg>
</div>
.icon{
display:flex;
align-items:center;
justify-content: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>
HTML:
<div class="wrap-center">
<svg width="20px" height="20px"></svg>
</div>
CSS:
.wrap-center {
display: flex;
justify-content: center;
align-items: center;
}
读了上面的内容，svg默认是内联的，我只是在div中添加了以下内容:
<div style="text-align:center;">
这招对我很管用。
纯粹主义者可能不喜欢它(这是一张图片，不是文本)，但在我看来，HTML和CSS在居中位置上搞砸了，所以我认为这是合理的。
这些答案对我都没用。我是这么做的。
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
