如何在div中居中SVG?


252

我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin-right设置为auto。不起作用,它的作用就像是左边距为0(默认值)。

有人知道我的错误吗?

Answers:


459

SVG默认为内联。添加display: block到它,然后margin: auto将按预期工作。


10
可以肯定的是,这也意味着text-align:位于父元素上的中心也将起作用(无论如何,它在Chrome中也适用于我)
Nathan

29

以上答案对我没有用。不过,将属性添加preserveAspectRatio="xMidYMin"<svg>标签确实可以解决问题。的viewBox需要指定属性才能使其正常工作。资料来源:Mozilla开发人员网络


7
我当前的方法是flexbox。只需添加:.container { display: flex; justify-content: center; }并将.container类添加到包含svg的div中。
Esger

1
考虑用这种新方法添加另一个答案,以便我投票赞成。谢谢你的帮助!
克里斯·彼得斯

24

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

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

它为我带来了成功。

纯粹主义者可能不喜欢它(它是图像,而不是文本),但是在我看来,HTML和CSS超出了中心点,因此我认为这是合理的。


谢谢你 简单有效。几个小时一直在疯狂地困扰着viewPort和viewBox。这在几秒钟内就成功了。只需将愚蠢的东西包装在div中并居中。
anon58192932 '12

@ anon58192932 —非常欢迎。它非常简单,但是满足了它对其他人的使用,因为我从这里对问题的更复杂的回答中受益。
戴维(David)

20

这些答案都不对我有用。这就是我做的。

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

3
我不知道为什么,但我不得不使用left: 100%
路易斯德尚拉奇

16

上面的答案似乎并不完整,因为它们仅是从CSS角度而言。

SVG在视口中的位置受两个SVG属性的影响

  1. viewBox:定义svg覆盖的矩形区域。
  2. reserveAspectRatio:定义将viewBox放置在视口的位置,以及在视口更改时如何拉伸视口。

请点击Codepen中的此链接以获取详细说明

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">


4

确保您的CSS读取:

margin: 0 auto;

即使您说的是将左右设置为自动,也可能会出现错误。当然我们不会知道,因为您没有向我们显示任何代码。


3

您也可以这样做:

<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>

2

div如果您使用bootstrap,则将代码放在这两者之间:

  <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>

2

Flexbox是另一种方法:添加.container { display: flex; justify-content: center; }并将.container类添加到包含svg的div中。


0

对我来说,解决方法是将其添加margin: 0 auto;到包含<svg>

像这样:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.