我如何居中一个SVG在一个div?

小开

确保你的CSS如下:

margin: 0 auto;

即使您说您已经将左和右设置为auto，您可能会放置一个错误。当然我们不知道，因为你没有给我们看任何代码。

小开

最佳答案

SVG默认是内联的。向它添加display: block，然后margin: auto将像预期的那样工作。

小开

以上的答案对我没用。将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中就可以了。viewBox属性也需要被指定才能正常工作。来源:Mozilla开发人员网络 < / p >

小开

这些答案对我都没用。我是这么做的。

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

小开

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

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

这招对我很管用。

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

小开

我必须使用

display: inline-block;

小开

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

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

viewBox:定义svg要覆盖的矩形区域。
preserveAspectRatio:定义在哪里放置viewBox wrt视口，以及如何在视口改变时拉伸它。

< a href = " https://codepen。 . io/jonitrythall/post/preserveaspectratio-in-svg" rel="noreferrer">按照代码依赖的链接查看详细描述

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

小开

你还可以这样做:

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

小开

如果你正在使用引导，将你的代码放在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>

小开

Flexbox是另一种方法:添加

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

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

小开

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

是这样的:

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

小开

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

   display: block;
margin: auto;

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

小开

只需将容器视为flex，并将svg项以flex属性居中即可:

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


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

小开

上面的答案对我都没用。如果SVG来自谷歌图标，请尝试以下方法:

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

小开

HTML:

<div class="wrap-center">
<svg width="20px" height="20px"></svg>
</div>

CSS:

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

小开

谢谢你的回答，但只是补充你可以使用px而不是%

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

小开

function getAlignment(align) {
let result = 'preserveAspectRatio="';
switch (align) {
case "top-left":
result += 'xMinYMin" ';
break;
case "top-mid":
result += 'xMidYMin" ';
break;
case "top-right":
result += 'xMaxYMin" ';
break;
case "mid-mid":
result += 'xMidYMid" ';
break;
case "mid-left":
result += 'xMinYMid" ';
break;
case "mid-right":
result += 'xMaxYMid" ';
break;
case "bottom-left":
result += 'xMinYMax" ';
break;
case "bottom-mid":
result += 'xMidYMax" ';
break;
case "bottom-right":
result += 'xMaxYMax" ';
break;
default:
result = '';
}
return result;
}