Макет HTML-страниц с CSS

Центрирование элемента, выравнивание слоев и...

Центрирование страницы по горизонтали

Очень простое решение дает спецификация W3C. Если для свойств margin-left и margin-right установлено значение auto, содержимое центрируется по горизонтали. Итак, для центрирования всей страницы нужно создать глобальный слой, содержащий все остальные (на теле это не работает) и присвоить ему это свойство:

#outer { margin:0 auto;}

Это можно применить к любому элементу на странице.

Размещение элемента в середине HTML-страницы (по центру)

Так что центрируйте его и по вертикали, и по горизонтали. С этим довольно простым CSS-кодом, совместимым со всеми браузерами с IE8 года:

.centered
{
position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right: 0;
height:50%;
width:50%;
}

Размеры могут быть абсолютными или выраженными в процентах. Это можно использовать для создания осветительного ящика со свойством display: none, которое можно динамически изменить на display: block .

Выравнивание двух разделов страницы рядом

Например, если вы вставляете изображение в текст и хотите, чтобы текст не окружал изображение, а располагался рядом с ним в одном столбце.
Используем свойства float и overflow:

<img src="images/html5-logo.png" width="64" height="64" style="float:left">
<div style="overflow:hidden;">...text...</div>

Заполнение пространства тегом div

При назначении слою высоты 100% он заполняет пространство в вмещающем слое. Проблема в том, что если добавить еще один элемент, то вся вещь переполнится из вмещающего слоя. С переполнением: скрыто, часть будет скрыта .
Так как же заполнить пространство в контейнере? Без использования фиксированной высоты, ведь приходится подстраивать под окно размеры, которые пользователь может менять. Решение состоит в том, чтобы придать вмещающему слою свойство «подложка-дно», высота которого будет соответствовать высоте второго элемента . Пример:

<div style="padding:bottom:10px">
<div style="height:100%"></div>
<div style="height:10px"></div>
</div>

Если требуется сохранить высоту контейнера, необходимо добавить свойство размера коробки, как показано на этой странице.
Padding уменьшает указанную высоту до 100%, освобождая место для второго элемента и предотвращая переполнение.

См. также:

Интерфейс приложения HTML. Макет содержимого страницы полностью адаптируется к размеру окна.