CSS 处理未知高宽比竖直垂直居中完成编码

日期:2020-10-25 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

规范访问器如Mozilla, Opera, Safari等.,可将父级元素显示信息方法设置为TABLE(display: table;) ,內部子元素定为table-cell (display: table-cell),根据vertical-align特点使其竖直垂直居中,但非规范访问器是不适用的。

非规范访问器只能在子元素里设距顶部50%,里边再套个元素距顶部⑸0% 来相抵。

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: ⑸0%;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根据。

提醒:您能够先改动一部分编码再运作