Сохраняйте SVG по центру при использовании медиа-запросов

Question

У меня есть страница, на которой я нарисовал несколько SVG, используя d3.js. При создании графики SVG я указал фиксированные высоты & ширины (которые представляют максимальные высоты/ширины, которые я хотел). Это работало отлично, и с CSS, все было сосредоточено на странице, как я и хотел. Тем не менее, я также хотел, чтобы SVG масштабировались, когда ширина экрана была ниже фиксированной.

Для решения проблемы масштабирования, я убрал высоту и ширину атрибутов из SVG и использовал вместо viewBox (давая 0 0 <width> <height> и preserveAspectRatio Cool -. Теперь все весы на всю ширину страницы, то есть как width = 100% в CSS.

затем я добавил свои медиазапросы и они работают - сохраняется максимальная ширина SVGs, и ниже, что они масштабироваться
Но:.. как только MQS активны, SVGs и их содержащий divs выравниваются влево. Я долгое время занимался CSS, а также искал в googling, и я не смог его решить.

Вот мой код (некоторые вещи слегка упрощены). Может ли кто-нибудь помочь?

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

Медиа запрос: (работает, но вдруг div s с SVGs являются выравнивание по левому краю ??? Нет разницы, если я не добавить СМИ запрос встроенного SVG.)

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

Я добавил все варианты CSS для центрального выравнивания, но я не мог сдвинуть с места размещение :(Я чувствую, что мне не хватает очевидного здесь (или, может быть, мне нужно иметь немного другую настройку?), И я очень благодарен за помощь ,

Примечание: SVG создаются в моем JS-файле. Я рисую их с ширинами и высотами, указанными в атрибутах viewBox для каждого.

Answer 1

Объяснение:

В контейнерах вы SVG не были никогда выровнены по центру, в первую очередь.

Когда медиа-запросы были неактивными т.е. когда вы не дать 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; 
    } 
}