Лучший способ реализовать «Открытые карты» Веб-страницы

Если бы я хотел создать веб-страницу с контентом о размере открытки, как бы я мог поместить ее на экран?Лучший способ реализовать «Открытые карты» Веб-страницы

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

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

Спасибо!

источник

2009-02-25 John

Вы можете сделать это с помощью 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; 
}

источник

2009-02-25 17:06:04 Ademuk

Это только вызывает проблемы в IE6? (Если я сжимаю окно, мы начинаем терять вершину «открытки» div) – John

Странно, кажется, отлично работает для меня в IE6. – Ademuk

Если вы сделаете окно размером менее 600 пикселей с приведенным выше кодом в IE6, верхняя часть контейнера начинает становиться недоступной – John

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

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

источник

2009-02-25 18:45:27 John

Лучший способ реализовать «Открытые карты» Веб-страницы

ответ

Смежные вопросы