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

有人知道误差是多少吗?


当前回答

把这两行放到style.css中 在指定的div类中。

   display: block;
   margin: auto;

然后尝试运行它,您将能够看到SVG现在在中心对齐。

其他回答

我必须使用

display: inline-block;

如果你使用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>

把这两行放到style.css中 在指定的div类中。

   display: block;
   margin: auto;

然后尝试运行它,您将能够看到SVG现在在中心对齐。

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

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

Flexbox是另一种方法:添加

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

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