为什么内联块 div 有内容时的位置较低？ [复制]答案

【问题标题】：Why does an inline-block div get positioned lower when it has content? [duplicate]为什么内联块 div 有内容时的位置较低？ [复制]
【发布时间】：2012-11-03 14:55:30
【问题描述】：

如果您将三个相同的 div 放置在 inline-block 中，它们会完美对齐。但是，如果您将任何内容放在任何 div 中，它就会下降到其他 div 之下。为什么会这样？

<div class="left">?</div>
<div class="center"></div>
<div class="right"></div>

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
}

http://jsfiddle.net/7kkC6/

更好的例子：http://jsfiddle.net/7kkC6/9/

【问题讨论】：

标签： css

【解决方案1】：

这是因为垂直对齐默认设置为基线。您可以通过将其设置为顶部来解决您的问题：

div {
    display:inline-block;
    margin-:2px;
    height:100px;
    width:25px;
    border:1px solid black;
    vertical-align: top;
}

这里的演示：http://jsfiddle.net/7kkC6/4/

【讨论】：

我什至不知道vertical-align在这里起作用。