Question

我需要我的div来占用可用的水平空间（如果它们合适），并且它们需要居中。到目前为止我的代码给了我div之间的水平空格。我该如何删除它？

到目前为止，这是我的html / css

＆＃13;

body {
  line-height: 0;
}

#outer {
  text-align: center;
  height: 100%;
}

.inner {
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

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

＆＃13;

我意识到text-align: center可能不是以div为中心的最佳方式，但它是目前唯一有效的方法。

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

Answer 1

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

display: flex;
justify-content: center;

试试这个demo

您可以详细了解flex here

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

1 个答案: