在Firefox，IE6和IE7中可以正常使用的将HTML内容垂直和水平居中的实用解决方案是什么？
一些细节：
我正在寻找整个页面的解决方案。
您只需要指定要居中的元素的宽度。元素的高度在设计时未知。
最小化窗口时，仅当所有空白都消失时才出现滚动。换句话说，屏幕的宽度应表示为：
“ leftSpace宽度=（screenWidth-widthOfCenteredElement）/ 2” +
“ centeredElement宽度= widthOfCenteredElement” +
“ rightSpace宽度=（screenWidth-widthOfCenteredElement）/ 2”
和高度相同：
“” topSpace高度=（screenHeight-heightOfCenteredElement）/ 2“ +
” centeredElement高度= heightOfCenteredElement“ +
” bottomSpace高度=（screenWidth-heightOfCenteredElement）/ 2“
<!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的解决方案也是一个不错的解决方案。如果您知道需要居中的内容的高度似乎会更好。
| 归档时间： |
|
| 查看次数： |
10261 次 |
| 最近记录： |