在FF，IE6和IE7工作的HTML中的垂直和水平中心的实用解决方案 [英] Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7

问题描述

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

一些细节：

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




• 仅指定要居中的元素的宽度。




• 在最小化窗口时，仅当所有空白区域都消失时才会显示滚动。
  换句话说，屏幕宽度应该表示为：

leftSpace width =（screenWidth- widthOfCenteredElement）/ 2+

centeredElement width = widthOfCenteredElement+

rightSpace width =（screenWidth-widthOfCenteredElement）/ 2

$ b b

同样的高度：

topSpace height =（screenHeight-heightOfCenteredElement）/ 2+

centeredElement height = heightOfCenteredElement+

bottomSpace height =（screenWidth-heightOfCenteredElement）/ 2

• 的表是好的。我打算使用这种布局大多是特殊的页面，如登录。因此，CSS纯度在这里不那么重要，而以后的标准对于未来的兼容性是理想的。

解决方案

从 http://www.webmonkey.com/codelibrary/Center_a_DIV

  #horizo​​n 
 {
 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 =horizo​​n> 
< div id =content> 
< p>此文字是< br>< emphasis> DEAD CENTER< / emphasis>< br& 
< / div><！ - 关闭内容 - > 
< / div><！ -  closing horizo​​n  - > 
  

What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?

Some details:

• I am looking for solution for the entire page.

• You need to specify only width of the element to be centered. Height of the element is not known in design time.

• When minimizing window, scrolling should appear only when all white space is gone. In other words, width of screen should be represented as:

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

And the same for the height:

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

• By practical I mean that use of tables is OK. I intend to use this layout mostly for special pages like login. So CSS purity is not so important here, while following standards is desirable for future compatibility.

解决方案

From 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-->

这篇关于在FF，IE6和IE7工作的HTML中的垂直和水平中心的实用解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！