为什么我的内联块 div 只有一个有文本时没有对齐？ [复制]答案

【问题标题】：Why my inline-block divs are not aligned when only one of them has text? [duplicate]为什么我的内联块 div 只有一个有文本时没有对齐？ [复制]
【发布时间】：2012-11-12 22:41:05
【问题描述】：

直播页面here。

鉴于此 HTML 页面：

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

我希望我的两篇文章都是对齐的，但正如下面的屏幕截图所示，只有当我的两篇文章都有文本时，<article> 元素才会居中对齐：

任何想法是什么导致了这种行为以及如何解决？

【问题讨论】：

在空文章中添加&nbsp; 可以解决此问题，但我正在寻找更好的解决方案。
@bookcasey 我知道，但我想知道是什么导致了这种行为。

标签： html alignment css

【解决方案1】：

添加：

vertical-align: bottom;

你的第二条规则应该使它起作用。显然，没有文本的 inline-blocks 被渲染为 inline-images 或其他东西，这些元素的垂直对齐是不正确的，因此强制它们对齐到底部可以解决问题。

来源：inline-block element with no text renders differently

【讨论】：

谢谢，但为什么首先需要它？更官方/正式的解释会有所帮助。
这应该是选择的答案。
我觉得这个效果更好

【解决方案2】：

这是 CSS 中“基线”垂直对齐的结果。来自CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

基线

将框的基线与父框的基线对齐。 如果框没有基线，将下边距边缘与父基线对齐。（我的重点）

因为内联块的默认对齐方式是“基线”，除非它被覆盖，否则此规则适用。当文本放入 inline-block 时，该文本将为 inline-block 创建基线，并且第一个（非粗体）句子适用。

当 inline-block 中没有文本时，它没有基线，因此第二个（粗体）句子适用。

在此处的 JSFiddle 中：http://jsfiddle.net/WjCb9/1/ 我已从您的示例中删除了 margin:1em，它正在创建（至少对我而言）一种误导性错觉，并添加了文本 baseline 以显示包含框的基线位置是。基线位于单词“baseline”的底部，因此您可以看到空的 inline-block 的底部边距边缘与上述 CSS 规则所要求的父基线对齐。

【讨论】：

【解决方案3】：

克隆this

为文章添加垂直对齐：

section[role=main] article { 
  ...
  vertical-align: middle;
}

http://jsbin.com/oqodol/6/edit

【讨论】：

【解决方案4】：

inline-block 元素由其父元素的text-align 定位。

如果块内没有文本，则没有要对齐的内容。

您可以通过使用display: block; 和浮点数来解决这个问题，或者我的建议是使用伪元素插入一个不间断的零宽度空间：

section[role=main] article:before {
  content: "\2060";
}

Demo

【讨论】：