如何将 SVG 置于 div 中心？

问题描述 投票：0回答：18

我有一个 SVG，我试图将其放在 div 中。 div 的宽度为 900px。 SVG 的宽度为 400 像素。 SVG 将其 margin-left 和 margin-right 设置为 auto。不起作用，它只是表现得好像左边距为 0（默认）。

有人知道错误是什么吗？

css layout svg positioning margin
18个回答
649
投票

SVG 默认情况下是内联的。

将 

display: block
添加到其中，然后 
margin: auto
将按预期工作。

或者根据您的布局，您可能希望保持 SVG 内联并在父元素上设置 

text-align: center
。

作为另一种选择，您可以在父元素上使用 Flex 或网格布局使 SVG 居中。

46
投票

以上答案对我不起作用。 不过，将属性 

preserveAspectRatio="xMidYMin"
添加到 
<svg>
标签就可以了。需要指定 
viewBox
属性才能使其正常工作。 来源：Mozilla 开发者网络

40
投票

在阅读上面的内容后，svg 默认情况下是内联的，我刚刚将以下内容添加到 div 中：

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

它对我有用。

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

30
投票

Flexbox 是另一种方法：添加

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

并将 

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

26
投票

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

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

上面的答案看起来不完整，因为它们仅从 CSS 的角度进行讨论。

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

  1. viewBox：定义svg覆盖的矩形区域。
  2. preserveAspectRatio：定义将 viewBox 放置在视口的位置以及视口发生变化时如何拉伸它。

请点击 codepen 中的此链接以获取详细说明

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

我必须使用

display: inline-block;
9
投票

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

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

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

确保你的 CSS 为：

margin: 0 auto;

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

6
投票

将这两行放入

style.css
在您指定的 
div
班级中。

   display: block;
   margin: auto;

然后尝试运行它，您将能够看到

svg
现在已居中对齐。

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>

3
投票

以上答案都不适合我。如果 SVG 来自 Google Icons，请尝试以下操作：

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

HTML：

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

CSS：

.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
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>
2
投票

对我来说，解决方法是将 

margin: 0 auto;
添加到包含 
<svg>
的元素上。

像这样：

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

感谢您的回答，但只是为了添加您可以使用 px 而不是 %

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

如果 svg 区域小于 div，大部分效果都很好。 但是如果我有一个更大的 svg，比如说 width=500px 并且 div 只有 100px 那么 自动出现水平滚动..但是如何使图像居中？我只看到图像的左上角部分。我想看到图像的中心部分，我在 svg 上绘制东西。每次我都需要调整滚动条才能到达中间部分绘制的任何小东西。 我从在中间绘制小东西开始，然后随着用户添加更多对象，它会变得更宽。但我想保持 svg 总面积很大。角落里有一些无关紧要的静止物体。用户应该看到整个 svg 的中间部分，然后他可以向左或向右滚动以查看 svg 的其他部分。 另一种问这个问题的方法可能是如何将滚动条最初居中？

-1
投票
<div align="center">
  /* svg code */
</div>

此代码将 SVG 放在 div 元素中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.