原文标题:
Vertical Centering in CSS
副标题:
Yuhu's Definitive Solution with Unknown Height
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;)
,内部子元素定为table-cell (display:
table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}
xhtml
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>
以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。
测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。
效果演示
分享到:
相关推荐
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
本文主要介绍了CSS未知高度垂直居中的实现,分享给大家,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" ...
垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度) 说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在...
今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <style> body { text-align:center} #info{ margin:0
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
NULL 博文链接:https://xdwangiflytek.iteye.com/blog/1343445
接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助
经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 <!DOCTYPE ...<head><... charset=utf-8" />...CSS布局技巧:未知高度div 垂直居中的问题</t
未知大小的图片 垂直居中,水平居中,纯CSS。兼容主流浏览器。
资源内容为如何让已知宽高和未知宽高的div元素垂直水平居中,内容适合新手小白,细节方面都有,如果有误,望高手指导谢谢!
6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...
δ知大小的图片在已知容器中的垂直居中和水平居中,一直是困扰大家的问题,今天西西带给大家一个简单的实现办法,详见css文件,此代码兼容各个浏览器,源码库推荐下载!
flex实现水平垂直居中 适用场景:父子宽高都可未知(比较推荐这种方式,简单,而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法 但是实际在浏览器中实现起来的效果并不是很完美,由于各浏览器的解析都各不相同,所以在各...
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。 题目的难点在于两...