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

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

haorooms   發(fā)布時間：2016-06-03 11:50:57   作者：Aaron   我要評論
這篇文章主要介紹了CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解,即在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-align: middle;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-size: 24px;   
  8.     height: 350px;   
  9.     text-align: center;   
  10.     overflow: hidden;   
  11.     width: 280px;   
  12. }   
  13. .outer  .inner,   
  14. .outer  .v {   
  15.     display: inline-block;   
  16.     zoom: 1;*display: inline; /* 用于觸發(fā)支持IE67 inline-block */  
  17. }   
  18. .outer  .inner {               
  19.     line-height: 1.8;   
  20.     padding: 0 4px 0 5px;   
  21.     vertical-align: middle;   
  22.     width: 262px;              
  23. }   
  24. .outer  .v {   
  25.     line-height: 350px;   
  26.     text-indent:-9999px;   
  27.     width: 1px;            
  28. }  

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

相關(guān)文章

  • CSS水平垂直居中的幾種方法總結(jié)

    這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。
    2016-12-19

  • css讓容器水平垂直居中的7種方式

    這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-17

  • 利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局

    這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考
    2016-09-12

  • CSS設(shè)置文字圖片垂直居中的方法總結(jié)

    這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。
    2016-09-12

  • 深入理解CSS行高line-height與文本垂直居中的原理

    本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一
    2016-08-12

  • Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例

    下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器

    這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-05

  • CSS文本和div垂直居中方法總結(jié)

    這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下
    2016-07-04

  • CSS 實現(xiàn)垂直居中的幾種方法(必看)

    下面小編就為大家?guī)硪黄狢SS 實現(xiàn)垂直居中的幾種方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-14

  • CSS實現(xiàn)垂直居中的幾種方法小結(jié)

    在前端布局過程中，我們實現(xiàn)水平居中比較簡單，一般通過margin:0 auto;和父元素 text-align: center;就能實現(xiàn)。今天小編給大家?guī)砹薈SS實現(xiàn)垂直居中的幾種方法小結(jié)，感興
    2019-05-14

最新評論