[英]Vertically middle align text in a div
我的演示在這里:
http://jsfiddle.net/hrhktkbzyy/6b6s03ts/1/
HTML:
<div class="container divinline">
<div class="firstrow">
<div class="col1 divinline">COLUME 1</div>
<div class="col2 divinline">COLUME 2</div>
</div>
<div class="secondrow">ROW TWO</div>
</div>
CSS:
.divinline{
display:inline-block;
}
.container{
height:80px;
background:#ffee12;
width:50%;
text-align:left;
color:#FFF;
}
.firstrow{
background:#450011;
height:60%;
font-size: 0;
}
.secondrow{
background:#333333;
font-size:12px;
height:40%;
}
.col1{
background:#ffff00;
height:100%;
width:50%;
font-size:12px;
}
.col2{
background:#ff0000;
height:100%;
min-width:30%;
font-size:12px;
}
我要做的是將文本“ COLUME 1”和“ COLUME 2”垂直對齊到中間(或底部)。
任何人都可以提供幫助,我們將不勝感激。 謝謝。
您可以使用display: table-cell
和vertical-align:middle
來做到這一點。 適用於IE 8以上的所有瀏覽器。
我也建議使用“行高”方法。 但是,如果您不確定自己的div高度,則始終可以使用簡單的jquery來實現。
$(document).ready(function(){
var height = $('.firstrow').height();
$('.divinline').css('line-height', height + 'px');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.