 Способы центрирования блокаЦентрирование необходимо для того, чтобы ваш блок находился по середине. Обычно это первый основной блок, внутри которого находится сам сайт. В этой статье я приведу 3 основных способа центрирования, которые использую при вёрстке.
1. Первый способ заключается в указании свойствах блока автоматические отступы margin для левого и правого края. Таким образом для любого разрешения браузер сам вычислит положение блока. CSS: #wrap {margin: 0px auto; width: 600px; height: 400px; background: #000 } HTML: ... Недостатки: плохая поддержка браузеров IE6. Практически невозможно создать одинаковые отступы сверху и снизу. 2. Суть второго способа заключается в применении атрибута align="center". CSS: #wrap {width: 600px; height: 400px; background: #000;text-align: left } HTML: ... Недостатки: Приходится обрамлять наш блок в ещё один 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: ... Недостатки:Увеличивается количество CSS кода, хотя теперь мы и можем отцентировать наш блок точно по центру. Ещё к недостатком относится тот факт, что при уменьшении размера окна содержимое уходит за пределы окна и его не достать скроллом.
|
Просмотров: 8268