如何将 SVG 置于 div 中心？

发布于 2024-12-23 10:19:27 字数 152 浏览 1 评论 0原文

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

有谁知道有什么错误吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终遇你 2024-12-30 10:19:27

SVG 默认情况下是内联的。

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

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

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

回复收藏 0 原文

猥琐帝 2024-12-30 10:19:27

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

回复收藏 0 原文

安穩 2024-12-30 10:19:27

读完上面的内容后，svg 默认情况下是内联的，我只是将以下内容添加到 div: 中

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

，它对我来说很有效。

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

Having read above that svg is inline by default, I just added the following to the div:

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

and it did the trick for me.

Purists may not like it (it’s an image, not text) but in my opinion HTML and CSS screwed up over centring, so I think it’s justified.

回复收藏 0 原文

羞稚 2024-12-30 10:19:27

Flexbox 是另一种方法：添加

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

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

Flexbox is another approach: add

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

And add the .container class to the div which contains your svg.

回复收藏 0 原文

今天小雨转甜 2024-12-30 10:19:27

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

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

None of these answers worked for me. This is how I did it.

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

回复收藏 0 原文

黑寡妇 2024-12-30 10:19:27

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

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

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

点击 codepen 中的此链接了解详细说明

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

Answers above look incomplete as they are talking from css point of view only.

positioning of svg within viewport is affected by two svg attributes

viewBox: defines the rectangle area for svg to cover.
preserveAspectRatio: defined where to place the viewBox wrt viewport and how to strech it if viewport changes.

Follow this link from codepen for detailed description

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

回复收藏 0 原文

初心 2024-12-30 10:19:27

我不得不使用

display: inline-block;

I had to use

display: inline-block;

回复收藏 0 原文

十秒萌定你 2024-12-30 10:19:27

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

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

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

Just treat the container as flex and center the svg item by flex properties:

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

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

回复收藏 0 原文

娇纵 2024-12-30 10:19:27

确保你的CSS显示为：

margin: 0 auto;

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

make sure your css reads:

margin: 0 auto;

Even though you're saying you have the left and right set to auto, you may be placing an error. Of course we wouldn't know though because you did not show us any code.

回复收藏 0 原文

再见回来 2024-12-30 10:19:27

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

   display: block;
   margin: auto;

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

Put these two lines in style.css
In your specified div class.

   display: block;
   margin: auto;

and then try to run it, you will be able to see that svg is now aligned in the center.

回复收藏 0 原文

櫻之舞 2024-12-30 10:19:27

您还可以这样做：

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

You can also do this:

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

回复收藏 0 原文

隔岸观火 2024-12-30 10:19:27

HTML：

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

CSS：

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

HTML:

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

CSS:

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

回复收藏 0 原文

满天都是小星星 2024-12-30 10:19:27

对我来说，解决方法是将 margin: 0 auto; 添加到包含的元素上。

像这样：

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

For me, the fix was to add margin: 0 auto; onto the element containing the <svg>.

Like this:

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

回复收藏 0 原文

不一样的天空 2024-12-30 10:19:27

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

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

None of the above answers worked for me. If the SVG is from Google Icons try this:

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

回复收藏 0 原文

那伤。 2024-12-30 10:19:27

如果您使用 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>

Put your code in between this div if you are using bootstrap:

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

回复收藏 0 原文

北笙凉宸 2024-12-30 10:19:27

感谢您的回答，但只是补充一下，您可以使用 px 而不是 %

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

Thank you for this answer but just to add you can use px instead of %

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

回复收藏 0 原文

小巷里的女流氓 2024-12-30 10:19:27

<div align="center">
  /* svg code */
</div>

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

<div align="center">
  /* svg code */
</div>

This code center SVG in div element.

回复收藏 0 原文

~没有更多了~

关于作者

逆流

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

如何将 SVG 置于 div 中心？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

如何将 SVG 置于 div 中心？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。