css垂直置中@qunar

標籤：style   http   java   使用   os   strong   

1、div的高度已知---line-hight

 　　<div>　　　　 <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" />固定高寬,圖片垂直局中</span>　　</div>

 　　<style>

　　.vertical {  width:500px; height:220px;line-height:220px;border: 1px solid;text-align: center;　　}　　.vertical img {vertical-align: middle;　　}　　</style>　　<!--[if IE 6]>　　<style> 　　 .vertical span {  height: 100%; /* 要保證和父元素高度一樣才行 */writing-mode: tb-rl;vertical-align: middle; 　　}　　</style>　　<![endif]-->　　　　　　

只要給容器設定 line-height 和 height，並使兩值相等，再加上 over-flow: hidden

1.同時支援塊級和內聯極元素

2.支援所有瀏覽器

3.IE中不支援img等置中

2、定位方法垂直置中顯示圖片--height已知

　　<style>　　.vertical{width:300px;height:200px;display:table;text-align:center;border:solid 1px red;　　}　　.vertical span{display:table-cell;vertical-align:middle;border:solid 1px blue;　　}　　.vertical span img{border:dashed 1px green;　　}　　</style>　　<!--[if lte IE 7]>　　<style>　　.vertical{position:relative;overflow:hidden;　　}　　.vertical span{position:absolute;left:50%;top:50%;　　}　　.vertical span img{position:relative;left:-50%;top:-50%;　　}　　</style>　　<![endif]-->

　　 <div>　　　　  <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span>　　</div>

　　vertical-align適用於：內聯及 table-cell 元素；text-align適用於塊元素

3、未知高度垂直置中--resiez

　　<style type="text/css">　　.demo{resize:both;overflow:hidden;width:100px;height:100px;background:#aaa;display:inline-block;font-size:0; 　　}　　.demo p{display:inline-block;vertical-align:middle;font-size:16px;　　}　　.demo::after{display:inline-block;height:100%;width:0;content:‘\0020‘;vertical-align:middle;　　}    </style>

 　　<div>

<p>ddd</p>　　</div>

　　IE6-8b不支援

4、利用button實現垂直置中

   /*單行文本對齊：button*/    .demo{      width:600px;      height:100px;      background:#fcc;      border: 1px solid #596480;    }    button{      margin:0;      padding:0;    }    .demo button{      width:0;      height:100px;      vertical-align:middle;      overflow:hidden;    }    .demo span{      /*這個不能省*/      vertical-align:middle;    }　　<h2>單行文本垂直置中：button</h2> 　　<div class="demo"> 　　 <button>test</button> 　　 <span>單行文本垂直對齊：button，不能置中對齊</span>　　</div>

　　　此方法不可以實現文本置中對齊

5、多行文本對齊：定位+百分比

　　<h2>多行文本垂直置中：定位+百分比</h2>　　<div class="mul-text">   　　 <div class="outter">      　　 <span class="inner">             多行文本垂直置中多行文本垂直置中多行文本垂直置中多行文本垂直置中多行文本垂直置中多行文本垂直置中             多行文本垂直置中多行文本垂直置中　　      </span>   　　</div>　　</div>     /*多行文本置中：1*/    .mul-text{        display: table-cell;        width:600px;        height: 100px;        vertical-align: middle;        text-align:center;        border: 1px solid #596480;        background: #ffc;        /*相容ie6,7*/        *position: relative;      }    .outter{        /*該div相對父div（class=mul-text）垂直對齊，使用的是絕對位置*/        *position: absolute;        *top: 50%;        *left: 0;    }    .inner{        /*相對父div(class=outter)進行相對定位,inner        會相對outter行框進行顯示*/        *position: relative;        /*設定top可以使得inner相對outter置中*/        *top: -50%;        *left: 0;            }

6、多行文本垂直置中：after

  　　<h2>多行文本垂直置中：after</h2>  　　<div class="mul-text-2">               　　<span class="inner-2">　　       多行文本顯示多行文本顯示多行文本顯示多行文本顯多行示多行文本顯示多行文本   　　 </span>　　    <span></span>           　　 </div>     /*多行文本對齊：after*/    .mul-text-2{        width:600px;        height:100px;        background:#aa8;        /*font-size不能少*/        font-size:0;        overflow:hidden;        text-align:center;    }    .inner-2,.after,.mul-text-2:after{        display:inline-block;        vertical-align:middle;    }    .inner-2{        font-size:18px;    }    .after,.mul-text-2:after{        /*清除浮動*/        content:"\0200";        overflow:hidden;        width:0;        height:100px;        visibility:hidden;    }

7、背景圖片置中

 　　<h2>圖片垂直置中：行高</h2>    　　 <div class="img-text">    　　 <span>sssssss1</span>    　　 <div class=‘img-div‘><i></i></div>　　 </div>    /*背景圖片*/    .img-text{        width:600px;        height:100px;        border:#f63;        border: 1px solid #596480;           vertical-align:middle;         text-align:center;         font-size:0;      }         .img-text span{        font-size:15px;        display:inline-block;        height:100px;        line-height:100px;    }    .img-div{        width:134px;        height:44px;                display:inline-block;         vertical-align:middle;           }    .logo{        display:inline-block;        background:url(./img/logo.png);        width:134px;        height:44px;       }