Лучший способ реализовать "почтовые открытки размером" веб-страниц - PullRequest
Новая
       8

Лучший способ реализовать "почтовые открытки размером" веб-страниц

2 голосов
/ 25 февраля 2009

Если бы я хотел создать веб-страницу с содержимым размером с открытку, как бы я разместил ее на экране?

По горизонтали это не проблема (поля автоматически); однако, центрирование по вертикали является проблемой.

Какой лучший способ центрировать контейнер по вертикали? Javascript? Должен ли я даже пытаться расположить его вертикально по центру, или вы вообще предпочли бы, чтобы страница начиналась около вершины?

Спасибо!

Ответы [ 2 ]

5 голосов
/ 25 февраля 2009

Вы можете сделать это с помощью CSS. Центрируйте контейнер DIV, используя 50% слева и сверху. Затем просто верните свою открытку на 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;
}
0 голосов
/ 25 февраля 2009

Я думаю, что собираюсь сдаться и пойти по столу; Похоже, что он правильно отображает кросс-браузер: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...