簡單理解css中的垂直居中和水平居中,即vertical-align和text-align屬性
前言:在很多情況下,我們要使用到內容的居中,這裡的居中包括了垂直居中和水平居中,下面來淺談一下
對於水平居中的屬性text-align和垂直居中屬性vertical-align的理解
(1)text-align
如果要實現水平居中,比如我們要實現塊狀元素(block)內,子元素的水平居中
<div class="div1">
<div class="div2">
</div>
</div>
比如我們要實現div2元素在父元素div1內的居中,我們則會有:
.div2{
display:inline-block
}
並且要設定父元素的屬性即:
.div1{
text-align:center
}
實現效果為:
關鍵:要實現這種水平居中,在設定父元素具有text-align:center屬性的基礎上,必須設定子元素(要居中
的元素)的display:inline-block或者display:inline,即只能實現行內塊的水平居中。
(2)vertical-align
這裡簡單的說一下,vertical-align屬性實現垂直居中
<div class="div1">
<div class="div2">
</div>
</div>
要實現div1父元素內的子元素div2,讓div2實現垂直居中,我們可以這樣設定:
.div1{
display:table-cell;
vertical-align:middle;
}
實現的效果為:
注:簡單的實現垂直居中,我們可以發現並不需要對子元素進行特殊設定,我們只需要設定父元素的
display:table-cell;vertical-align:middle 之後就能實現垂直方向的居中。(這種方式實現的垂直居中,會
導致水平不居中)
(3)補充
1.父元素設定屬性為text-align:center,並設定子類快為inline-block那麼,子類3個塊都會實現水平居中
2.父元素設定為line-height:= height: 並設定子類塊屬性為inline-block,那麼子類的所有都能實現垂直居中
3.對於text-align:center,如果父類元素的display:inline-flex,則子元素不能實現水平居中
2017.1.13補充,line-height:100px設定行高,此時給定了基線,此時如果要實現居中,只需要讓基線居中, 通過設定vertical-align:middle