Question

如果我想创建一个包含明信片尺寸内容的网页，我该如何将其放置在屏幕上？

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

将容器垂直居中的最佳方法是什么？ JavaScript的？我是否应该尝试将其垂直居中，或者您通常更喜欢在顶部附近开始页面？

谢谢！

Answer 1

你可以用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;
}

Answer 2

我想我要放弃并走桌子路线;它似乎是跨浏览器正确呈现：

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

实现“明信片大小”网页的最佳方式

2 个答案: