css vertical-align:middle; 垂直居中的一个推荐方式(IE7+)(个人喜欢)
2015-11-07 00:00
686 查看
摘要: css vertical-align:middle; 垂直居中的一个推荐方式(个人喜欢),因为该方式仅需要用到一个多余的holder标签,并且兼容IE7+浏览器。
记录一下:
采用 inline-block 方法:
HTML:
<div id="box">
<div id="content">我是内容<br />我也是内容</div>
<i class="_actor"></i>
</div>
CSS:
#box { height: 400px; background: #c00;}
#content { display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}
#content { font-size: 12px; color: #fff;}
._actor { width:0; font-size:0; height: 100%; display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}
加粗体的部分是关键所在。
原理是:都显示为行框的高度由最高的行内框决定。
i._actor作为演员,高度指定和父元素一致。
兼容性:支持inline-block的浏览器均可。
对于IE6/7,可以先使用hack方式使其支持 inline-block后,使用此方法实现垂直居中。
来源:张鑫旭的博客
记录一下:
采用 inline-block 方法:
HTML:
<div id="box">
<div id="content">我是内容<br />我也是内容</div>
<i class="_actor"></i>
</div>
CSS:
#box { height: 400px; background: #c00;}
#content { display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}
#content { font-size: 12px; color: #fff;}
._actor { width:0; font-size:0; height: 100%; display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}
加粗体的部分是关键所在。
原理是:都显示为行框的高度由最高的行内框决定。
i._actor作为演员,高度指定和父元素一致。
兼容性:支持inline-block的浏览器均可。
对于IE6/7,可以先使用hack方式使其支持 inline-block后,使用此方法实现垂直居中。
来源:张鑫旭的博客
相关文章推荐
- CSS-网页字体缩放样式-webkit-text-size-adjust的用法详解
- CSS-CSS3 box-sizing
- CSS-CSS RESET
- 53种纯CSS3炫酷loading指示器动画特效
- CSS-伪元素
- CSS3 Animation 帧动画
- DIV+CSS左右两列自适应高度
- 网格部件设置字段样式的智能向导不起作用??
- 网格部件设置字段样式的智能向导不起作用??
- css3实现手机菜单展开收起动画
- CSS3 平分
- CSS重置
- 30个最常用CSS选择器解析
- CSS实现简单无缝滚动
- CSS 属性设置优先级问题
- Css的三大机制(特性):特殊性、继承、层叠详解
- 获取样式currentstyle(),getComputedStyle()
- css盒模型详解
- 今天又被css恶搞了!
- 在CSS中定义a:link、a:visited、a:hover、a:active顺序