如何将SVG置于div中心？

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开发者网络

我当前的方法是flexbox。只需添加：`.container {display：flex; 证明内容：中心；}并将.container类添加到包含svg的div中。 (3认同)
考虑使用这种新方法添加另一个答案，以便我可以投票。感谢您的帮助！ (2认同)

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属性的影响

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

Answer 6

Flexbox 是另一种方法：添加

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

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

Answer 7

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

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

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

Answer 8

将这两行放入style.css 您指定的div类中。

   display: block;
   margin: auto;

然后尝试运行它，您将能够看到它svg现在已居中对齐。

Answer 9

确保您的 css 显示：

margin: 0 auto;

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

Answer 10

我不得不用

display: inline-block;