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

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

WBOY
Freigeben: 2016-06-24 11:34:04
Original
1170 Leute haben es durchsucht

记录一下:

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

来源:张鑫旭的博客


Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage