メディアクエリを使用中にSVGを中央に置く

Question

d3.jsを使用していくつかのSVGを描いたページがあります。 SVGグラフィックスを構築している間に、私は一定の高さである&の幅（これは私が望む最大の高さ/幅を表しています）を指定しました。これはうまく機能し、CSSで、私が望むようにすべてがページに集中しました。しかし、私はまた、画面幅が固定幅を下回ったときにSVGを拡大することを望んでいました。スケーリングの問題に取り組むために

、私は、SVGからの高さと幅の属性を削除し、代わりにviewBoxを使用（0 0 <width> <height>を与え、そしてpreserveAspectRatioクール - 。今ではすべてのページの幅いっぱいに拡大縮小、すなわちのようなCSSでwidth = 100%を。

だから、私は私のメディアクエリを追加し、彼らが働く - SVGsの最大幅は保存され、その下に、彼らは拡張され
しかし：。できるだけ早くMQSは、SVGsアクティブであり、その含有するものとして。 divを左に揃えています。私はCSSを使って長い時間を過ごしました。また、グーグルでグーグルで回っていて、それを解決できませんでした。

ここに私のコード（若干単純化されたもの）があります。誰も助けることができますか？

HTML：

<div class="overall-container"> 

<div class="svg-container"> 
    <h2>Smaller SVG</h2> 
    <svg id="ebu-cb" 
     version="1.1" 
     baseProfile="full" 
     viewBox="0 0 768 576" 
     preserveAspectRatio="xMinYMin meet" 
     xmlns="http://www.w3.org/2000/svg"> 
    </svg> 
</div> 

<div class="lg-svg-container"> 
    <h2>Larger SVG</h2> 
    <svg id="smpte-cb-hd" 
     version="1.1" 
     baseProfile="full" 
     viewBox="0 0 1280 720" 
     preserveAspectRatio="xMinYMin meet" 
     shape-rendering="crispEdges" 
     xmlns="http://www.w3.org/2000/svg"> 
    </svg> 
</div> 

</div> 

CSS：

body { 
    text-align: center; 
} 

svg { 
    border: 2px solid black; 
    margin: 0 auto; 
} 

div { 
    margin-bottom: 3rem; 
} 

メディアクエリ：（作品が、私はメディアを追加する場合、突然SVGsとdiv sが???整列ませ差が残っていませんSVGのインラインでクエリを実行してください）。

中央配置のためのあらゆる種類のCSSオプションがありましたが、プレースメントを変更することはできませんでした:(私はここではっきりと分かっていないと感じていますか？

注：SVGはJSファイルで生成されます。私はそれぞれのためにviewBoxの属性で指定された幅と高さで描画しています。

Answer 1

説明：あなたが最初の場所で整列センターことはありませんでしたしている

SVGコンテナ。

メディアクエリがである場合は、 ieです。 がの場合はmax-widthを容器に入れて、は100％幅のを取ったため中心に置かれているように見えましたが、実際には決して中央に置かれませんでした。

max-widthを追加してコンテナの幅を小さくした場合にのみ気づくことがあります。

原因と解決策：

は、あなたが実際にそれを中央揃えに任意のプロパティを与えたことはありません。そうmargin: autoプロパティ追加することによって、同様にあなたは今それを与える必要があります。

@media only screen and (min-width: 750px) { 
    .svg-container { 
    max-width: 768px; 
    margin: auto; 
    } 
    .lg-svg-container { 
    max-width: 1280px; 
    margin: auto; 
    } 
}