По идее, процесс выравнивания нескольких элементов сразу должен быть так же прост. Было бы отлично, если бы существовал параметр 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 полностью выйдут из обихода.