欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解

haorooms   發(fā)布時間:2016-06-03 11:50:57   作者:Aaron   我要評論
這篇文章主要介紹了CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下

需求案例

案例是這樣的,一個外層div,高寬是固定的,但是里面內(nèi)容不是固定的。很多朋友的做法是頭部加一個padding或者margin,這樣,里面內(nèi)容顯得貌似是居中了,但是假如內(nèi)容變化,這樣頭部的固定padding或者margin,始終不變。造成了垂直方向不會居中!

我們知道,假如下面一個div

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class="outer"><div class="inner">haorooms內(nèi)部內(nèi)容</div></div>  

樣式是這樣的

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .outer{text-align:center;vertical-alignmiddle;width:200px;height:350px;}  

vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了,和我上面說的,加margin等等!那對于這種情況,有沒有更好的解決方案呢?

解決方法

思路:加一個cssHack,設(shè)置cssHack的line-height等于外層div的高度,就可以使用vertical-align:middle了!

div如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class="outer">   
  2.     <div class="inner">haorooms內(nèi)部內(nèi)容</div><div class="v">cssHack</div>   
  3. </div>  

樣式如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5. .outer {   
  6.     background-color#ccc;   
  7.     font-size24px;   
  8.     height350px;   
  9.     text-aligncenter;   
  10.     overflowhidden;   
  11.     width280px;   
  12. }   
  13. .outer  .inner,   
  14. .outer  .v {   
  15.     displayinline-block;   
  16.     zoom: 1;*displayinline/* 用于觸發(fā)支持IE67 inline-block */  
  17. }   
  18. .outer  .inner {               
  19.     line-height: 1.8;   
  20.     padding: 0 4px 0 5px;   
  21.     vertical-alignmiddle;   
  22.     width262px;              
  23. }   
  24. .outer  .v {   
  25.     line-height350px;   
  26.     text-indent:-9999px;   
  27.     width1px;            
  28. }  

這樣就實(shí)現(xiàn)了div內(nèi)部的垂直居中了!

相關(guān)文章

最新評論