Практическое решение для вертикального и горизонтального центрирования в HTML, которое работает в FF, IE6 и IE7
Что может быть практическим решением для вертикального и горизонтального центрирования содержимого в HTML, которое работает в Firefox, IE6 и IE7?
Некоторые детали:
Ищу решение для всей страницы.
Вам нужно указать только ширину центрируемого элемента. Высота элемента не известна во время разработки.
При сворачивании окна прокрутка должна появляться только тогда, когда все пустое пространство исчезнет. Другими словами, ширина экрана должна быть представлена как:
"leftSpace width = (screenWidth-widthOfCenteredElement) / 2" +
"centeredElement width = widthOfCenteredElement" +
"rightSpace width = (screenWidth-widthOfCenteredElement) / 2"
И то же самое по высоте:
"topSpace height = (screenHeight-heightOfCenteredElement) / 2" +
"centeredElement height = heightOfCenteredElement" +
"bottomSpace height = (screenWidth-heightOfCenteredElement) / 2"
- Практически я имею в виду, что использование таблиц - это нормально. Я собираюсь использовать этот макет в основном для специальных страниц, таких как логин. Так что чистота CSS здесь не так важна, а для будущей совместимости желательно соблюдение стандартов.
Ответы 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type = "text/css" media = "screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body>
<table id = "outer" cellpadding = "0" cellspacing = "0">
<tr><td id = "middle">
<div id = "centered" style = "border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
Решение от community.contractwebdevelopment.com тоже хорошее. И если вы знаете высоту вашего контента, который нужно центрировать, кажется, лучше.
Для горизонтального:
<style>
body
{
text-align:left;
}
.MainBlockElement
{
text-align:center;
margin: 0 auto;
}
</style>
Вам понадобится text-align: left в теле, чтобы исправить ошибку с рендерингом IE.
Это то, чего вы пытаетесь достичь? Если нет, объясните, чем отличается изображение ниже?
Это приведет к тому, что когда вы измените размер окна, ваш контент всегда будет того же размера, но по центру.
От 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-->
Для этого вопроса вы можете использовать этот стиль
#yourElement {
margin:0 auto;
min-width:500px;
}
Это не совсем то, что я обычно ищу. Центрированное содержимое должно иметь фиксированный размер (в пикселях), а не только 50% экрана. И исправляю, указав только ширину содержимого. И ищу решение не указывать фиксированную высоту. Таким образом, этот макет можно использовать для вещей разной, но одинаковой ширины.