38

现场页面在这里。

鉴于此 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>元素才会居中对齐：

对齐问题

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

4

4 回答 4

60

添加：

vertical-align: bottom;

你的第二条规则应该使它起作用。显然，没有文本的内联块被渲染为内联图像或其他内容，并且这些元素的垂直对齐不正确，因此强制它们与底部对齐可以解决问题。

来源：没有文本的 inline-block 元素呈现方式不同

于 2012-11-25T04:15:12.823 回答
47

这是 CSS 中“基线”垂直对齐的结果。来自CSS 2.1 规范，第 10.8 节行高计算：'line-height' 和 'vertical-align' 属性

基线

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

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

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

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

于 2012-11-25T11:46:23.637 回答
6

这个的克隆

为文章添加垂直对齐：

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

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

于 2012-11-25T04:18:53.633 回答
2

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

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

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

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

演示

于 2012-11-25T04:17:29.737 回答