Question

在Firefox，IE6和IE7中使用HTML的垂直和水平内容居中的实用解决方案是什么？

一些细节：

我正在寻找整个页面的解决方案。
您只需指定要居中的元素的宽度。设计时间内未知元素的高度。
最小化窗口时，只有当所有空白区域消失时才会出现滚动。换句话说，屏幕宽度应表示为：

“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”

实际上我的意思是表的使用是可以的。我打算将此布局主要用于登录等特殊页面。因此，CSS纯度在这里并不那么重要，而以下标准对于未来的兼容性是可取的。

Answer 1

来自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-->

Answer 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的解决方案也是一个很好的解决方案。如果您知道需要居中的内容高度似乎更好。

Answer 3

横向：

<style>
body
{
    text-align:left;
}
.MainBlockElement
{
    text-align:center;
    margin: 0 auto;
}
</style>

您需要在正文中使用text-align：left来修复IE渲染的错误。

Answer 4

对于此问题，您可以使用此样式

#yourElement {
   margin:0 auto;
   min-width:500px;
}

Answer 5

这是你想要完成的吗？如果没有，请解释与下图不同的内容？

alt text

在HTML，IE6和IE7中工作的HTML垂直和水平居中的实用解决方案

5 个答案: