首页 文章

如何将SVG置于div中心?

提问于
浏览
199

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

有人知道我的错误吗?

9 回答

  • 11

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

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

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

  • 20

    以上答案对我不起作用 . 将属性 preserveAspectRatio="xMidYMin" 添加到 <svg> 标签可以解决这个问题 . 需要为此指定 viewBox 属性才能工作 . 资料来源:Mozilla developer network

  • 23

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

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

    它为我做了伎俩 .

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

  • 16

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

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

    • viewBox:定义要覆盖的svg的矩形区域 .

    • preserveAspectRatio:定义viewBox wrt视口的放置位置以及视口更改时如何拉伸它 .

    Follow this link from codepen for detailed description

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

    我不得不使用

    display: inline-block;
    
  • 3

    确保你的CSS写道:

    margin: 0 auto;
    

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

  • 1

    你也可以这样做:

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

    如果您使用 bootstrap ,请将代码置于此_2911956之间:

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

相关问题