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

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

  • 从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

    下一篇: Using jQuery to center a DIV on the screen