html - 如何删除包含固定大小 svg 元素的 div 之间的水平空间？

Question

我需要我的 div 占据可用的水平空间(如果它们适合)，并且它们需要居中。到目前为止，我的代码为我提供了 div 之间的水平空间。我怎样才能删除它？

这是我目前的 html/css

body {
  line-height: 0;
}

#outer {
  text-align: center;
  height: 100%;
}

.inner {
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  vertical-align: top;
}

<div id="outer">
        <div class="inner">
          <svg width="100" height="100"></svg>
        </div>
        <div class="inner">
          <svg width="100" height="100"></svg>
        </div>
        <div class="inner">
          <svg width="100" height="100"></svg>
        </div>
      </div>

我意识到 text-align: center 可能不是使 div 居中的最佳方法，但这是迄今为止唯一有效的方法。

编辑:接受的答案解决了居中问题。通过设置 font-size: 0 解决水平空间问题。

Answer 1

只需将此 css 规则添加到您的外部 div:

display: flex;
justify-content: center;

试试这个 demo

您可以了解有关 flex 的更多信息 here