在HTML,FF,IE6和IE7中垂直和水平居中的实用解决方案
什么可以是一个实用的解决方案,以HTML,在Firefox,IE6和IE7中工作的垂直和水平内容中心?
一些细节:
我正在寻找整个页面的解决方案。
您只需指定要居中的元素的宽度。 元素的高度在设计时间内是未知的。
当最小化窗口时,只有当全部空白消失时滚动才会出现。 换句话说,屏幕的宽度应该表示为:
“leftSpace width =(screenWidth-widthOfCenteredElement)/ 2”+
“centeredElement width = widthOfCenteredElement”+
“rightSpace width =(screenWidth-widthOfCenteredElement)/ 2”
高度相同:
“topSpace height =(screenHeight-heightOfCenteredElement)/ 2”+
“centeredElement height = heightOfCenteredElement”+
“bottomSpace height =(screenWidth-heightOfCenteredElement)/ 2”
从http://www.webmonkey.com/codelibrary/Center_a_DIV
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}
#content
{
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
}
<div id="horizon">
<div id="content">
<p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
</div><!-- closes content-->
</div><!-- closes horizon-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered" style="border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
来自community.contractwebdevelopment.com的解决方案也是一个不错的选择。 如果你知道需要集中的内容的高度似乎更好。
对于水平:
<style>
body
{
text-align:left;
}
.MainBlockElement
{
text-align:center;
margin: 0 auto;
}
</style>
您需要在文本对齐:留在身体来修复与IE的渲染错误。
链接地址: http://www.djcxy.com/p/75707.html上一篇: Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7