>  기사  >  웹 프론트엔드  >  css vertical-align:middle; 垂直居中的一个推荐方式(IE7+)(个人喜欢)_html/css_WEB-ITnose

css vertical-align:middle; 垂直居中的一个推荐方式(IE7+)(个人喜欢)_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:34:041152검색

记录一下:

采用 inline-block 方法:

HTML:

我是内容
我也是内容
       

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后,使用此方法实现垂直居中。

来源:张鑫旭的博客


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.