| Центрирование необходимо для того, чтобы ваш блок находился по середине. Обычно это первый основной блок, внутри которого находится сам сайт. В этой статье я приведу 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 кода, хотя теперь мы и можем отцентировать наш блок точно по центру. Ещё к недостатком относится тот факт, что при уменьшении размера окна содержимое уходит за пределы окна и его не достать скроллом.
Всё, что вы знаете обо мне — ложь и клевета. Вся правда в твиттере и на сайте.
Сообщение отредактировал rusak - Понедельник, 29-Июн-2009, 04:10:40 | 
