html - 如何垂直对齐内联 block div 中的 div 中的文本？

Question

请看代码:

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 的边框重叠。我想将它们垂直对齐到底部。有谁知道原因吗？

非常感谢。

Answer 1

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

所以你的容器类将是:

.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