미디어 쿼리를 사용하는 동안 SVG 중심 유지

Question

d3.js를 사용하여 여러 SVG를 그렸던 페이지가 있습니다. SVG 그래픽을 빌드하는 동안 고정 너비 & 너비 (원하는 최대 너비/너비를 나타냄)를 지정했습니다. 이것은 잘 작동하고 CSS와 함께, 모든 것이 페이지에 집중되었습니다. 그러나 화면 너비가 고정 너비보다 낮 으면 SVG의 크기를 조정하기를 원했습니다.

는 스케일링 문제를 해결하기 위해, 내가 높이와 SVG에서 폭 속성을 제거하고 대신 0 0 <width> <height> 및 preserveAspectRatio을 제공 ( viewBox를 사용 쿨 -. 지금은 모든 페이지의 전체 폭, 즉 같은 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의이 왼쪽 정렬되어 ??? 어떤 차이 나는 미디어를 추가하지 않는 경우 SVG의 인라인으로 문의하십시오.)

중앙 맞춤을위한 모든 종류의 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; 
    } 
}