css 垂直置中

標籤：border   多行   css垂直置中   垂直   text   splay   aaaaa   ica   class   

1. line-height :單行文字垂直置中
　　適用於 按鈕 下拉框 導航  原理是將單行文字的行高設定後,文字會位於行高的垂直中間位置.

2.line-height + inline-block 多個物件多個元素或多行元素的垂直置中
　　將多個元素或多行元素當成一個行元素來看待,需要將這些資料多包一層,並將其設定為inline-block, 並在該inline-block對象的外層使用inline-block來代替height的設定,
　　

<style>
.box{       width:500px;       border:1px solid #f00;       margin:auto;       line-height:200px;       text-align:center;}.box .content{       display:inline-block;       height:auto;       line-height:1;       width:400px;       background:#ccc;}</style><div class="box ">    <div class="content">       aaaaaaaaaa<a href="">bbbbbbbbbbbbbb</a>       cccccccccccccccccc    </div></div>

3.:befor + inline-block 多個物件的css垂直置中
　　:before偽類元素+inline-block 屬性的寫法好處在於子項目置中可以不需要特別設定高度,將:before偽類元素設定為100%高的inline-block,再搭配上將需要劇中的子項目同樣設定成inline-block性質,就能使用vertical-align:minddle達到垂直置中

　　
　　 

　　

　　

css 垂直置中