SVGをdivの中央に配置するにはどうすればよいですか?


254

divの中央に配置しようとしているSVGがあります。divの幅は900pxです。SVGの幅は400pxです。SVGのマージン左とマージン右は自動に設定されています。機能しません。左マージンが0(デフォルト)であるかのように機能します。

誰かが私のエラーを知っていますか?

回答:


460

SVGはデフォルトでインラインです。それに追加display: blockすると、margin: auto期待どおりに動作します。


10
これは、text-align:親要素の中央も機能することを意味します(とにかくChromeで機能します)
Nathan

これは私にとってはうまくいきませんでしたが、「block」の代わりに「inline-block」を使用するとうまくいきました。多分それは私がSVGをa tdではなくに挿入したためでしたdiv
mathheadinclouds

29

上記の答えは私にはうまくいきませんでした。ただしpreserveAspectRatio="xMidYMin"<svg>タグに属性を追加することでうまくいきました。viewBox属性は、同様の仕事にこれを指定する必要があります。出典:Mozilla開発者ネットワーク


7
私の現在のアプローチはflexboxです。追加:.container { display: flex; justify-content: center; }.containerクラスをsvgを含むdivに追加します。
Esger、

1
この新しいアプローチで別の回答を追加して、賛成できるようにしてください。ご協力いただきありがとうございます!
クリスピーターズ

24

上記を読んで、svgはデフォルトでインラインであるので、divに次のコードを追加しました。

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

そしてそれは私のためのトリックをしました。

純粋主義者はそれを好まないかもしれません(それは画像ではなくテキストです)が、私の意見ではHTMLとCSSは中心からめちゃくちゃになっているので、それは正当だと思います。


これをありがとう。シンプルで効果的。viewPortとviewBoxをいじくりまわして何時間も怒っています。これは数秒でトリックを行いました。愚かなことをdivでラップして中央に置くだけです。
anon58192932

@ anon58192932 —どういたしまして。それは愚かなほど単純ですが、ここでの質問に対するより多くのより洗練された回答から私が恩恵を受けているので、それは他の人に役立つことを満足しています。
デビッド

20

これらの答えはどれもうまくいきませんでした。これは私がやった方法です。

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

3
私はなぜ知らないが、私は使用していたleft: 100%
ルイス・デシャンラッジ

16

上記の回答は、CSSの観点からのみ話しているため、不完全に見えます。

ビューポート内でのsvgの配置は、2つのsvg属性の影響を受けます

  1. viewBox:svgがカバーする長方形領域を定義します。
  2. preserveAspectRatio:ビューボックスwrtビューポートを配置する場所と、ビューポートが変更された場合にストレッチする方法を定義します。

詳細な説明については、codepenからこのリンクをたどってください

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


4

あなたのCSSが次のようになっていることを確認してください:

margin: 0 auto;

左と右を自動に設定していると言っていても、エラーが発生している可能性があります。もちろん、あなたが私たちにコードを見せなかったので、私たちは知らないでしょう。


3

これを行うこともできます:

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

2

ブートストラップ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

Flexboxは別のアプローチです。追加して、svgを含むdivにクラスを.container { display: flex; justify-content: center; }追加し.containerます。


0

私にとっての修正はmargin: 0 auto;、を含む要素に追加することでした<svg>

このような:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.