Главная » Администрирование сайта » Работа со стилями (CSS) » Способы центрирования блока

Способы центрирования блока

04.07.2009 в 03:26
Автор: rusak

Центрирование необходимо для того, чтобы ваш блок находился по середине. Обычно это первый основной блок, внутри которого находится сам сайт. В этой статье я приведу 3 основных способа центрирования, которые использую при вёрстке.

1. Первый способ заключается в указании свойствах блока автоматические отступы margin для левого и правого края. Таким образом для любого разрешения браузер сам вычислит положение блока.

CSS:

#wrap {margin: 0px auto; width: 600px; height: 400px; background: #000 }

HTML:

...
<body>
<div id="wrap">Текст</div>
</body>

Недостатки: плохая поддержка браузеров IE6. Практически невозможно создать одинаковые отступы сверху и снизу.

2. Суть второго способа заключается в применении атрибута align="center".

CSS:

#wrap {width: 600px; height: 400px; background: #000;text-align: left }

HTML:

...
<body>
<div align="center">
<div id="wrap">Текст</div>
</div>
</body>

Недостатки: Приходится обрамлять наш блок в ещё один div, а в свойствах для самого блока попутно указывать форматирование текста по левому краю, иначе все дочерние элементы будут центроваться. Не получится сделать равные отступы сверху и снизу

3. С применение position: absolute. Идея такова, что наш блок получает значения позиции середины, вычисляемое в процентах и потом с помощью отрицательного отступа задаётся колонка:

CSS:

#wrap {position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; background: #000 }

HTML:

...
<body>
<div id="wrap">Текст</div>
</body>

Недостатки:Увеличивается количество CSS кода, хотя теперь мы и можем отцентировать наш блок точно по центру. Ещё к недостатком относится тот факт, что при уменьшении размера окна содержимое уходит за пределы окна и его не достать скроллом.

блок, центрирование


Рейтинг: 5  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 5347          Комментариев: 0