我想在另一个div的中心水平放置一个div.
<div id="container">
<div id="centered">
hello world;
</div>
</div
我用"margin:0px auto"技巧尝试了以下风格,但它只适用于FF,而不适用于IE.
div
{
border-width: 2px;
border-style: solid;
}
#centered
{
margin: 0 auto;
width: 30px;
}
#container
{
width: 100px;
}
有没有办法实现这个跨浏览器？
Pao*_*ino 11
您可能没有在文档中包含DOCTYPE,因此将IE推入怪癖模式.
将其添加到文件的顶部,例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
请参阅此处的区别:使用doctype,不使用doctype.
始终在文档中包含DOCTYPE以使您的网站在不同浏览器中尽可能保持一致是一种非常好的做法.使用DOCTYPE和重置样式表,跨浏览器布局更加可靠.
上述DOCTYPE只是众多选择中的一种.有关更多信息,请查看此stackoverflow问题
您可能还注意到Stackoverflow的姊妹网站以网页设计的这个非常重要的方面命名:Doctype.
请参阅Quirks模式和严格模式以及使用Doctype激活浏览器模式.基本上它是一个很好的做法,迫使浏览器(IE尤)更符合标准的通过始终使用DOCTYPE的文件,这样的顶部:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
所有浏览器都将水平居中margin: 0 auto.
编辑:这个问题最初说"垂直居中,因此答案如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
基本上,它涉及相对+绝对+相对定位(而其具有表格单元格内容的平凡)是复杂的.
| 归档时间： |
|
| 查看次数： |
13489 次 |
| 最近记录： |