Question

我试图在父块div元素中有一系列内联块div元素，它们都位于相同的高度。有些div有文字，有些则没有。 div中的文本需要垂直居中而不是水平。我使用行高来居中文本，但没有文本的div与其他文本不对齐。这是我的代码：

<div class='line'>    
    <div class='someText'>text 1</div>    
    <div class='someText'>text 2</div>    
    <div class='noText'></div>    
    <div class='someText'>text 3</div>    
    <div class='someText'>text 4</div>
</div>


.line{
    display: block;
    height: 50px;
    max-height: 50px;
}

.someText{
    display: inline-block;
    line-height: 50px;
    background-color: RED;
    padding: 10px;
}

.noText {
    display: inline-block;
    height: 50px;
    width:50px;
    background-color: BLUE;
    padding: 10px;
}

有人可以向我解释为什么会发生这种情况和/或提供可能的解决方案吗？如果可能，我想避免使用表格。

谢谢！

这里还有一个显示问题的jsfiddle。 https://jsfiddle.net/n1LbcLr1/

Answer 1

我在这里找到答案：Why does setting line-height for one of two inline-block sibling divs effect both divs?

您只需将vertical-align: top;添加到带文字的div即可。

蓝色div将自己置于文本基线。如果将vertical-align更改为top，它将正确定位。

如何将div元素与某些文本对齐，有些则不对齐？

1 个答案: