从中心水平对齐一组div

Question

这是一个jsfiddle

see jsfiddle

谁能说说为什么我每行看到 3 个元素。好像应该是4个，因为width是25%。以及如何解决？也许有人知道如何用 bootstrap 列来实现这样的事情？

我试图从中心对齐未知数量的 divs..

Answer 1

而不是 inline-block 做一个浮动：

.row > div {
    /* display: inline-block; */
    background-color: #EEE;
    width: 25%;
    padding: 0;
    margin: 0;
    float: left;
}

如果要使元素居中，只需应用负边距即可：

margin: 0 0 0 -4px;

Answer 2

问题是 <div> 之间的中断导致 space 因为 inline-block 属性。尝试以下操作：

<div class="row">
    <div>Q</div><div>W</div><div>E</div><div>R</div>
</div>

然后，您将有四个连续的 <div>，中间没有 space。

或者，您可以将周围 <div> 的字体大小减小为零：

.row {
  text-align: center;
  font-size: 0px;
}
.row > div {
  display: inline-block;
  background-color: #EEE;
  width: 25%;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

Answer 3

您看到的效果是由于 HTML 布局内联块（实际上是所有内联元素），它们之间的任意数量的白色-space 被识别为单个space 宽度由内联上下文的字体大小和系列指定的字符。

因此，即使每个内联块恰好是其容器宽度的 25%，它们之间的 spaces 也会迫使其中 4 个的总宽度超过容器宽度的 100%，因此第 4 个掉落到下一行。

这是出于布局目的使用内联块的祸根。这里有一些关于如何处理这个问题的建议： Ignore whitespace in HTML。亮点包括：

将容器的字体大小设置为 0，然后将其在子项上重置为所需的大小。
将所有子元素保留在一行文本中（换行符读作白色-space），它们之间没有space。注意：如果您使用的是后端或字体端模板系统，则可能有支持此功能的工具，因此您的源代码有换行符，但在浏览器中发送或呈现的内容没有。
使用 HTML 注释来排除源代码中内联块之间的换行符和 tabs/spaces（不雅且难以维护）。

该问题的其他一些答案建议使用内联块以外的其他东西来处理布局的技术，例如float 和 flex。这些也很好，但是内联块的某些方面可能值得付出努力让它们工作，即：

您可以使用 vertical-align 属性来控制垂直对齐（优于浮动）
可变高度的项目将以可预测的方式彼此相邻出现（优于浮动）
可以保留每个元素的宽度来确定每个元素之间的间距（相对于 flex 的优势）

从中心水平对齐一组div

Horizontally align set of divs from center

css

inline

twitter-bootstrap