css兩種垂直居中對齊解決方案
第一種垂直居中方法
利用vertical-align:middle
進行垂直方向上的居中對齊,此方法需要滿足的條件:
-
設定父元素的行高
line-height
等於父元素height
的高度 -
子元素必須是行內塊級元素
display:inline-block;
-
子元素設定
vertical-align:middle
- 此方法在開發中不能右浮動(不能靠右邊)
下方是完整程式碼,可以新建一個HTML檔案進行測試(綠色的盒子):
<html> <head> <title>導航條</title> <meta charset="utf-8" /> </head> <style> *{ margin:0; padding:0; } .div1{ height:200px; background:yellow; /*行高等於容器高度*/ line-height:200px; } .div2{ width:100px; height:100px; background:green; /*行內塊級元素*/ display:inline-block; /*中線和父元素基線上方出對其,參考字母"x"*/ vertical-align:middle; } .div3{ width:100px; height:100px; background:red; display:inline-block; } </style> <body> <div class="div1"> xxxxxxxxxxx <div class="div2" > </div> <div class="div3" > </div> </div> </body> </html>
第一種方法結束。
第二種垂直居中方法
這種方法比較暴力,利用定位解決:
right:0px;
下方是完整程式碼,可以新建一個HTML檔案進行測試(綠色的盒子):
<html> <head> <title>導航條</title> <meta charset="utf-8" /> </head> <style> *{ margin:0; padding:0; } .div1{ height:200px; background:yellow; /*相對定位開啟*/ position:relative; } .div2{ width:100px; height:100px; background:green; /*絕對定位*/ position:absolute; /*可以右對齊*/ right:0px; /*先向下移動父元素的50%,此時子元素的頂部與父元素的中線對齊了*/ top:50%; /*再向上移動自身高度"height"的一半,此時子元素的中線和父元素的中線對齊了*/ margin-top:-50px } </style> <body> <div class="div1"> <div class="div2" > </div> </div> </body> </html>
第二種方法結束。
總結
上面兩種方法的特點都是讓子元素的中線和父元素的中線對齊。