2011-12-26 16 views
153

私はSVGを持っています。 divの幅は900pxです。 SVGの幅は400pxです。 SVGのマージンはleftとmargin-rightをautoに設定します。動作しません。ちょうど左余白が0(デフォルト)であるかのように動作します。SVGをdivに配置するにはどうすればよいですか?

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

margin: 0 auto; 

あなたがエラーを配置することができる、あなたは自動に左と右のセットを持って言っているにもかかわらず:

答えて

275

SVGはデフォルトでインラインです。これにdisplay: blockを追加し、次にmargin: autoが期待どおりに機能します。

+4

はかなり確信して、これはまた、そのテキスト整列を意味:親要素の中心が、あまりにも動作します(それはで私の作品Chromeとにかく) – Nathan

2

は、あなたのCSSを読み込むことを確認してください。もちろん、コードを表示していないため、わかりません。

20

上記の回答は私には役に立たなかった。 preserveAspectRatio="xMidYMin"というタグを<svg>タグに追加すると、やっかいです。このためにはviewBox属性も指定する必要があります。 出典:Mozilla developer network

13

これらの回答はどれも私のためには役に立たなかった。これが私のやり方です。そのSVGの上に読んだ

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

私は理由を知らないが、私は 'left:100%'を使用しなければならなかった。 –

11

は、デフォルトでは、インラインである、私はdiv要素に次の追加:

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

をし、それが私のためにトリックをしました。

純粋主義者はそれが好きではないかもしれませんが(テキストではなく画像ですが)、私の意見では、HTMLとCSSがねじ込まれてセンタリングされているので正当だと思います。

1

私は、彼らが唯一のビューのCSSの観点から話をしているとして上記

display: inline-block; 
8

回答が不完全に見える使用する必要がありました。カバーするSVGのための矩形領域を定義:ビューポート内のSVGの

位置決めは、二つのSVG

  1. ビューボックス属性に影響されます。
  2. preserveAspectRatio:viewBox wrtビューポートを配置する場所と、ビューポートが変更された場合にどのように伸ばすかを定義します。

Follow this link from codepen for detailed description

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

これはそれだ。私のために完全に働いた – warunanc

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

ありがとうマーティン、魔法のように働いた! –