html如何居中svg,css - 如何在div中居中SVG？

css - 如何在div中居中SVG？

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

有人知道我的错误吗？

8个解决方案

342 votes

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

Spadar Shut answered 2019-03-16T11:54:31Z

23 votes

以上答案对我不起作用。将属性preserveAspectRatio="xMidYMin"添加到标记可以解决这个问题。 需要为此指定viewBox属性才能工作。来源：Mozilla开发者网络

Esger answered 2019-03-16T11:54:57Z

18 votes

在上面读过svg默认是内联的，我刚刚在div中添加了以下内容：

它为我做了伎俩。

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

David answered 2019-03-16T11:55:37Z

16 votes

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

position: relative;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

Ryan answered 2019-03-16T11:56:04Z

11 votes

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

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

viewBox：定义要覆盖的svg的矩形区域。

preserveAspectRatio：定义viewBox wrt视口的放置位置以及如果视口更改时如何拉伸它。

请从codepen中获取此链接以获取详细说明

Shishir Arora answered 2019-03-16T11:57:01Z

3 votes

我不得不使用

display: inline-block;

Joanna Schweiger answered 2019-03-16T11:57:21Z

2 votes

确保你的CSS写道：

margin: 0 auto;

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

Michael Rader answered 2019-03-16T11:57:54Z

1 votes

你也可以这样做：

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"

/>

Martin Lloyd Jose answered 2019-03-16T11:58:15Z