使用媒体查询时保持 SVG 居中

Question

我有一个页面，我在其中使用 d3.js 绘制了几个 SVG。在构建 SVG 图形时，我指定了固定的高度和宽度（代表我想要的最大高度/宽度）。这很好用，并且使用 CSS，一切都以页面为中心，正如我想要的那样。但是，我还希望 SVG 在屏幕宽度低于固定宽度时进行缩放。

为了解决缩放问题，我从 SVG 中删除了高度和宽度属性，转而使用 viewBox（给出 0 0 <width> <height> 和 preserveAspectRatio。很酷 - 现在所有内容都缩放到页面的整个宽度，即就像 CSS 中的 width = 100%。

然后我添加了我的媒体查询。而且它们可以工作 - SVG 的最大宽度被保留，并且低于它们的缩放比例。
但是：一旦 MQ 处于活动状态，SVG 及其包含的 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;
}

媒体查询：（有效，但带有 SVG 的 divs 突然左对齐？？？如果我在 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;
  }
}