首页 > 代码库 > css垂直居中@qunar
css垂直居中@qunar
1、div的高度已知---line-hight
<div> <span><img src=http://www.mamicode.com/"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.mamicode.com/"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; }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。