—»     —»   Центрируем несколько DIV’ов с помощью CSS
  Раздел: CSS/Style Sheets   Комментариев: 5  

Центрируем несколько DIV’ов с помощью CSS

В какой-то момент у вас могут возникнуть ситуации, когда вам захочется выровнять несколько элементов по центру (может быть, DIV или другие элементы) в одну строку с фиксированным значением ширины. Центрировать отдельный элемент с фиксированной шириной достаточно просто. Просто добавьте margin:auto и фиксированное значение ширины элементу, который хотите выровнять по центру, и отступы принудительно выровняют элемент по центру.

По идее, процесс выравнивания нескольких элементов сразу должен быть так же прост. Было бы отлично, если бы существовал параметр CSS «box-align», посредством которого можно было бы придать значение «center», которое бы также выравнивало все дочерние элементы по центру.

Вы можете добиться нечто похожего посредством преимущества гибкого CSS, а точнее посредством преобразования элементов (за неимением более подходящего термина). Ознакомьтесь с демо-файлом того, о чем мы сегодня будем говорить.

Стандартный метод

Обычно в такой ситуации, следовало бы установить значение плавающих блоков, затем добавить правый и левый отступы для того, чтобы расположить по центру. Но это может вызвать некоторые проблемы, так как IE6 не воспринимает данный метод, и вам каждый раз придется выставлять различные id или классы для элементов, которым вы хотите добавить отступы (например, последний или первый).

Проблему с IE6 можно обойти, если добавить параметр display:inline, но тогда код будет выглядеть немного не эстетично из-за лишних данных о последнем или первом пунктах. К тому же, последний блок может переместиться на следующую строку в IE.

Существует другое решение проблемы, которое должно работать более корректно.

Использовать встроенные блоки и контролирующее белое пространство

Для достижения того же эффекта выравнивания, можно просто преобразовать блочные элементы во встроенные блоки, а затем управлять свободным пространством между ними. Посмотрите на этот CSS-код:

#parent {
    width: 615px;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}

В примере, приведенном выше, указано, что есть 4 дочерних блока, каждому из которых присвоен класс child, и каждый из них имеет размер 100х100 пикселей. CSS преобразует эти блоки во встроенные, что позволяет им естественно плавать, несмотря на текст и белое пространство. Конечно, так как у нас нет никакого текста в родительском блоке, управление текстом и белым пространством не составит труда.

Родительскому элементу (к примеру, блок с id 'parent') присвоены параметры 4 текстовых ключа, а дочернему два:

* text-align центрирует дочерние элементы
* letter-spacing контролирует размер белого пространства между блоками
* white-space: nowrap предотвращает перенос последнего элемента на новую строку
* overflow: hidden предотвращает блок от растягивания в IE6
* vertical-align: middle (у дочернего элемента) поддерживает блоки в вертикальном расположении, даже при добавлении содержимого
* display: inline-block (очевидно)

Internet Explorer, как всегда, отличился

Что бы означало любое CSS решение, если бы в мире не было проблем с Internet Explorer, которые приходится обходить? Этот метод работает во всех браузерах (включая IE8), за исключением IE6 и 7, так как они не поддерживают параметр inline-block. Для того чтобы эти браузеры показывали нам тот же результат, в CSS-код нужно добавить следующее:

.child {
    *display: inline;
    *margin: 0 20px 0 20px;
}

Вышеприведенный код нужно добавлять только при работе с IE6 и IE7, и он должен быть размещен после всего остального кода. В нашем коде (в коде, приведенном выше) мы реализовали это посредством хака со звездочками. Звездочка в начале каждой строки прячет линии от всех браузеров за исключением IE 6 и 7 версии. Отступы, добавленные сюда, помогают нам реализовать то же самое, а новый параметр отображения пользуется преимуществом бага в браузерах, и заставляет блоки работать, как будто им придали параметр inline.

Помехи / Заключительная мысль

Здесь не так уж и много помех. Просто не забудьте убедиться в том, что параметры белого пространства и текста сбрасываются для любого дочернего элемента, расположенного внутри блока. Итак, возможно это и работает прекрасно, если вы применяете прямые изображения или любое содержимое, которое не является текстом, но здесь могут возникнуть проблемы, если ваши блоки заполнены иным содержимым.

Несмотря на это, это отличный метод центрирования некоторых блочных элементов с равномерным оставленным пространством, особенно когда вы не желаете выставлять дополнительные классы конечным элементам. И этот метод будет более практичным, когда старые версии IE полностью выйдут из обихода.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 21738   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 июля 2010 @ 21:34
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Спасибо за интересную статью.
Комментарий #2: 21 декабря 2010 @ 13:31
Написал: Роман — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо, использую это в новой версии сайта в 2011 году
Комментарий #3: 21 декабря 2010 @ 13:36
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
player, Роман, пожалуйста! Пользуйтесь на здоровье smile
Комментарий #4: 24 декабря 2011 @ 16:45
Написал: Виктор — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Где взять такой виджет соцыалки как у вас на сайте,если можно поделитесь.
Комментарий #5: 24 декабря 2011 @ 17:39
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Виктор, делиться не будем, т.к. много вложили в работу по адаптации под себя, но где найти оригинал, подсказку дадим: здесь.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031