实现“Post Card Sized”网页的最佳方式

问题描述：

如果我想创建一个包含明信片大小内容的网页，我该如何将它放置在屏幕上？实现“Post Card Sized”网页的最佳方式

水平不是问题（边距自动）;但是，垂直居中是一个问题。

垂直居中集装箱的最佳方式是什么？ JavaScript的？我是否应该试图垂直居中，或者你是否总希望页面靠近顶部？

谢谢！

答

你可以用CSS做到这一点。使用50％的左侧和顶部将容器DIV居中。然后简单地将包含的明信片的高度的50％的高度抵消掉。

<div id="postcard_container"> 
    <div id="postcard"> 
    Postcard here 
    </div> 
</div> 

#postcard_container { 
    position:absolute; 
    display:block; 
    width:1px; 
    height:1px; 
    left:50%; 
    top:50%; 
} 
#postcard { 
    position:absolute; 
    width:800px; 
    height:600px; 
    left:-400px; 
    top:-300px; 
}

这是否只会导致在IE6的问题？（如果我缩小窗口，我们开始失去'明信片'div的顶部） – John 2009-02-25 18:32:46

答

我想我会放弃和去表的路线;它似乎正在渲染正确的跨浏览器：

<head> 
    <title></title> 
    <style type="text/css"> 
#content { 
    text-align: left; 
    padding: 5px; 
    width: 800px; 
    height: 600px; 
} 
</style> 
</head> 
<body> 
    <table style="width: 100%; height: 100%"> 
     <tr valign="middle"> 
      <td align="center"> 
       <div id="content"> 
        Postcard here 
       </div> 
      </td> 
     </tr> 
    </table> 
</body>

实现“Post Card Sized”网页的最佳方式

相关推荐