Html 为什么我的内联块 div 中只有一个有文本时没有对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13548168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why my inline-block divs are not aligned when only one of them has text?
提问by TheFooProgrammer
Live page here.
现场页面在这里。
Given this HTML page:
鉴于此 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>I expect both of my articles to be aligned, but as it can be seen in the screenshot below, only when both of my articles have text the <article>elements are center aligned:
我希望我的两篇文章都对齐，但正如在下面的屏幕截图中所见，只有当我的两篇文章都有文本时，<article>元素才居中对齐：
Any ideas what is causing this behavior and how can it be fixed?
任何想法是什么导致了这种行为以及如何解决？
回答by jcolicchio
Adding:
添加：
vertical-align: bottom;
To your second rule should make it work. Apparently, inline-blocks with no text are rendered as inline-images or something else, and the vertical-align of these elements are incorrect, so forcing them to be aligned to bottom fixes the issue.
你的第二条规则应该让它起作用。显然，没有文本的内联块被渲染为内联图像或其他东西，并且这些元素的垂直对齐是不正确的，因此强制它们与底部对齐可以解决问题。
Source: inline-block element with no text renders differently
回答by Alohci
This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
这是 CSS 中“基线”垂直对齐的结果。来自CSS 2.1 规范的第 10.8 节线高计算：'line-height' 和 'vertical-align' 属性
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.(my emphasis)
基线
将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父项的基线对齐。（我的重点）
Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.
因为内联块的默认对齐方式是“基线”，除非它被覆盖，否则此规则适用。当文本放入行内块时，该文本将为行内块创建基线，并且第一个（非粗体）句子适用。
When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.
当 inline-block 中没有文本时，它就没有基线，因此第二个（粗体）句子适用。
In the JSFiddle here: http://jsfiddle.net/WjCb9/1/I have removed from your example the margin:1emwhich was creating (at least for me) a misleading illusion, and added the text baselineto show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.
在此处的 JSFiddle：http: //jsfiddle.net/WjCb9/1/我已从您的示例中删除了margin:1em正在创建（至少对我而言）误导性错觉的示例，并添加了文本baseline以显示包含框的基线位置是。基线沿着单词“baseline”的底部，所以你可以看到空的 inline-block 的底部边距边缘与上面 CSS 规则所要求的父元素的基线对齐。
回答by Kasma
clone of this
克隆这个
Add vertical-align to article:
为文章添加垂直对齐：
section[role=main] article {
...
vertical-align: middle;
}
回答by bookcasey
The inline-blockelements are positioned by the text-alignof their parent.
该inline-block元件由位于text-align它们的父的。
If there is no text within the block, there is nothing to align.
如果块内没有文本，则无需对齐。
You can solve this problem by using display: block;and floats, or my suggestion is to insert a non-breaking, zero-width space with pseudo elements:
你可以通过使用display: block;和浮动来解决这个问题，或者我的建议是插入一个带有伪元素的不间断的零宽度空间：
section[role=main] article:before {
content: "60";
}
