6

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

一些细节：

  • 我正在寻找整个页面的解决方案。

  • 您只需要指定要居中的元素的宽度。元素的高度在设计时是未知的。

  • 最小化窗口时，只有在所有空白都消失时才会出现滚动。换句话说，屏幕的宽度应该表示为：

"leftSpace 宽度=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement 宽度=widthOfCenteredElement"+
"rightSpace 宽度=(screenWidth-widthOfCenteredElement)/2"

高度也一样：

"topSpace 高度=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement 高度=heightOfCenteredElement"+
"bottomSpace 高度=(screenWidth-heightOfCenteredElement)/2"

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

5 回答 5

4

来自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-->
于 2008-11-14T00:30:33.973 回答
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的解决方案也是一个不错的解决方案。如果您知道需要居中的内容的高度似乎会更好。

于 2008-09-08T09:18:49.387 回答
1

对于水平：

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

您需要正文中的 text-align:left 来修复 IE 呈现的错误。

于 2008-09-08T14:01:03.000 回答
1

对于这个问题，你可以使用这种风格

#yourElement {
   margin:0 auto;
   min-width:500px;
}
于 2012-10-22T11:14:59.677 回答
0

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

替代文字

于 2008-09-11T18:00:13.647 回答