Question

我有一个SVG，我试图以div为中心。 div的宽度为900px。 SVG的宽度为400px。 SVG的margin-left和margin-right设置为auto。不起作用，它只是表现为左边距为0（默认值）。

有人知道我的错误吗？

Answer 1

默认情况下，SVG是内联的。添加display: block，然后margin: auto将按预期工作。

Answer 2

以上答案对我不起作用。将属性preserveAspectRatio="xMidYMin"添加到<svg>标记可以解决这个问题。需要为此指定viewBox属性才能正常工作。资料来源：Mozilla developer network

Answer 3

上面已经读过svg默认是内联的，我只是将以下内容添加到div中：

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

它为我做了伎俩。

纯粹主义者可能不喜欢它（它是一个图像，而不是文本）但在我看来HTML和CSS搞砸了居中，所以我认为这是合理的。

Answer 4

这些答案都不适合我。这就是我做到的。

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

Answer 5

上面的答案看起来不完整，因为他们只是从css的角度来讨论。

svg在视口中的定位受两个svg属性的影响

viewBox：定义要覆盖的svg的矩形区域。
preserveAspectRatio：定义viewBox wrt视口的放置位置以及视口更改时如何拉伸它。

Follow this link from codepen for detailed description

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

Answer 6

Flexbox是另一种方法：添加

.container {
  display: flex;
  justify-content: center;
}

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

Answer 7

我必须使用

display: inline-block;

Answer 8

确保你的css上写着：

margin: 0 auto;

即使你说左边和右边设置为自动，你可能会发出错误。当然我们不会知道，因为你没有向我们展示任何代码。

Answer 9

你也可以这样做：

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

Answer 10

如果您使用的是引导程序，则将代码放在此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>

Answer 11

对我来说，解决方法是将margin: 0 auto;添加到包含<svg>的元素上。

赞：

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

Answer 12

将这两行放入 style.css 在您指定的df <- structure(list(ID = c(180700241L, 180901612L, 180900571L, 180900680L ), HsnrFrom = c(64L, 179L, 8L, 9L), HsnrTo = c(68L, 183L, 11L, 13L), sequence = c(2L, 2L, 1L, 2L)), class = "data.frame", row.names = c(NA, -4L))类中。

div

然后尝试运行它，您将可以看到.svg在中心对齐。

Answer 13

只需将容器视为 flex 并通过 flex 属性将 svg 项目居中：

<div classname='icon'>
  <svg>.....</svg>
</div>

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
 }

Answer 14

以上答案都不适合我。如果 SVG 来自 Google Icons，试试这个：

display: inline-block;
width: 24px;
vertical-align: middle;

如何将SVG置于div中心？

14 个答案: