如何垂直对齐内联块div中的div中的文本？答案

【问题标题】：How to vertically align text in div which in an inline-block div?如何垂直对齐内联块div中的div中的文本？
【发布时间】：2014-11-09 06:40:59
【问题描述】：

请看代码：

http://jsfiddle.net/hrhktkbzyy/0kwnL8k8/

<div>        
    <div class="container divinline">
    <div class="row1 ">ROW ONE</div>
    <div class="row2">ROW TWO</div>
</div>

CSS

.divinline{
    display:inline-block;
}

.container{
    line-height:60px;
    height:60px;
    background:#ffee12;
    width:50%;
    text-align:left;
}

.row1{
    background:#450011;
    font-size:12px;
    height:50%;
    line-height:50%;
}

.row2{
    background:#333333;
    font-size:12px;
    height:50%;
    line-height:50%;
    color:#FFF;
}

我不知道为什么 row1 和 row2 中的文本与两个 div 的边框重叠。我想将它们垂直对齐到底部。有人知道原因吗？

非常感谢。

【问题讨论】：

这是line-height设置。
我不建议您使用50% height，因为当它很小且只有几件物品时，您真的不需要它来响应。但是，我建议使用 <ul> 而不是您所拥有的，并给 [class of ul] li line-height

标签： html css

【解决方案1】：

类似于丹的回答 - http://jsfiddle.net/0kwnL8k8/4/ 但我添加了另一个“行”类以用于所有行。这确实假设高度是恒定的 30 像素。

.row {
  line-height:30px;
  height:50%;
  font-size:12px;
}

【讨论】：

【解决方案2】：

我刚刚回答了一个类似的问题：How to vertically align text in the middle of a div that has a percentage height?

你的情况可能是：http://jsfiddle.net/0kwnL8k8/5/

.row1:before, .row2:after {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

如果发生这种情况，请参阅此处链接的答案，以管理多行

【讨论】：

【解决方案3】：

为什么不将.container 中的height / line-height 减半，并从.row1 和.row2 中删除height:50%; 和line-height:50%;。

所以你的容器类是：

.container{
    line-height:30px; //half previous value
    height:30px; //half previous value
    background:#ffee12;
    width:50%;
    text-align:left;
}

并从row1 和row2 中删除 50% 的高度

.row1{
    background:#450011;
    font-size:12px;
}

.row2{
    background:#333333;
    font-size:12px;
    color:#FFF;
}

JS Fiddle Demo

【讨论】：