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

1. Обычный путь
2. Используйте inline-block и управляйте пробелами
3. Internet Explorer поднимает свою уродливую голову
4. Недостатки / Заключительные Мысли

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

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

Что ж, вы можете достичь чего-то похожего, используя гибкость CSS с «перекомпоновкой» элементов (из-за отсутствия лучшего термина). Посмотреть демо о том, что я буду описывать в этом коротком уроке.

Обычный путь

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

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

Есть и другое решение, которое может работать лучше при определенных обстоятельствах.

Используйте inline-block и управляйте пробелами

Для достижения того же эффекта, что и при добавлении чисел с плавающей точкой и полей, вы можете просто «перераспределить» свои элементы уровня блока как встроенные блоки, а затем манипулировать пустым пространством между ними. Вот как может выглядеть CSS:

#parent {width: 615px; граница: сплошная 1px #aaa; выравнивание текста: по центру; размер шрифта: 20 пикселей; межбуквенный интервал: 35 пикселей; пустое пространство: nowrap; высота строки: 12 пикселей; переполнение: скрытое; } .child {width: 100px; высота: 100 пикселей; граница: сплошная 1px #ccc; дисплей: встроенный блок; выравнивание по вертикали: среднее; }

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

У родительского элемента (с идентификатором parent в этом примере) установлено четыре ключевых текстовых свойства, а у дочерних - два:

• text-align делает все встроенные дочерние элементы центрированными
• межбуквенный интервал управляет размером каждого пробела между полями
• пробел: nowrap предотвращает возможность перехода последнего элемента к следующей строке
• переполнение: скрыто предотвращает растяжение окна в IE6
• вертикальное выравнивание: среднее (на дочерних элементах) сохраняет поля на одной вертикальной плоскости друг с другом при добавлении контента
• дисплей: встроенный блок (очевидно)

Internet Explorer поднимает свою уродливую голову

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

.child {* display: inline; * поле: 0 20px 0 20px; }

Вышеприведенный CSS должен применяться только к IE6 и IE7, и он должен появляться после другого CSS. В моем коде (и в приведенном выше примере кода) я достиг этого, используя взлом звездочки. Звездочка (или звездочка) в начале каждой строки скрывает обе строки из любого браузера, кроме IE6 и IE7. Поля, добавленные здесь, помогают нам получить тот же визуальный результат, а новое свойство display использует ошибку в тех браузерах, которая заставляет элемент блока работать как его встроенный, когда вы объявляете display: inline-block, за которым следует display: inline.

Недостатки / Заключительные Мысли

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

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

Похожие

Комментарии