如何在行內div 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的邊框重疊。 我想將它們垂直對齊到底部。 有人知道原因嗎？

許多thanx。

Answer 1

為什么不直接在.container height / line-height .container並移除height:50%; line-height:50%; 來自.row1和.row2 。

因此，您的容器類將是：

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

而從除去50％的高度row1和row2

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

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

JS小提琴演示

Answer 2

與Dan的答案類似-http://jsfiddle.net/0kwnL8k8/4/，但我添加了另一個“行”類以用於所有行。 這確實假定高度恆定為30px。

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

Answer 3

我剛剛回答了一個類似的問題： 如何在具有百分比高度的div中間垂直對齊文本？

在您的情況下，可能是： http : //jsfiddle.net/0kwnL8k8/5/

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

請參閱此處鏈接的答案，以便在發生這種情況時管理多行