我有一个SVG图像，我想要将其居中在一个div中。这个div的宽度是900像素。SVG图像的宽度是400像素。SVG图像的margin-left和margin-right都设置为auto。但是不起作用，它就好像左边距是0（默认值）。
有人知道是什么错误吗？
有人知道是什么错误吗？
17个回答
4
你也可以这样做：
<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>- Martin Lloyd Jose
3
以上的答案都对我没用。如果SVG来自Google图标，请尝试以下方法：
display: inline-block;
width: 24px;
vertical-align: middle;
- Marten
2
HTML:
<div class="wrap-center">
<svg width="20px" height="20px"></svg>
</div>
CSS：
.wrap-center {
display: flex;
justify-content: center;
align-items: center;
}
- Mahdyar
2
对我来说，解决方法是在包含<svg>的元素上添加margin: 0 auto;。
像这样：
<div style="margin: 0 auto">
<svg ...</svg>
</div>
- Collin Krawll
2
如果您正在使用Bootstrap，请将代码放在这个
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>
- Uzair Ahmad
1
你正在使用图标字体（内联）元素 - 没有涉及任何SVG。 - herrstrietzel
0
感谢您的回答，但是补充一下，您也可以使用px而不是%
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
- Ching Ching
1
0
<div align="center">
/* svg code */
</div>
这段代码将SVG居中在div元素中。
- Seyit Bilal
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接