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

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

WBOY
Release: 2016-06-24 11:34:04
Original
1170 people have browsed it

记录一下:

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

来源:张鑫旭的博客


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template