合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

CSS解决未知高度垂直居中

日期:2013-12-13  来源:攀枝花惠康网络公司

body {padding: 0; margin: 0;}

原文问题: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特征使其垂直居中,但非尺度浏览器是不撑持的。

CSS


body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#middle {position: absolute; top: 50%;} /* for explorer><div id=”outer”>
#outer[id] {display: table; position: static;}
<div id=”middle”>
<div id=”inner” class=”greenBorder”>
</div>
</div>
</div>

非尺度浏览器只能在子元素里设距顶部50%,琅缦沔再套个元素距顶部-50% 来抵消。

以上CSS代码的利益是没有hacks,采用了IE不撑持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value,可是Internet Explorer不撑持这种类型的选择器。同样地.value[class],相当于.value,这些只有尺度浏览器能读懂。

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网?#23621;?#21517;注册+网站服务器租用+网站开发+网站维护+网?#23621;?#38144;推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大中小城市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 卡昂vs第戎 广东南粤36选7开奖结果 拉斯帕尔马斯足球队 广东快乐10分APP 金角兽援彩金 富勒姆frei 时时彩计划稳赢版 双赢密探试玩 大邱庄钢铁网铁哥们助手 埃瓦尔股东证书