В своей практике часто сталкиваюсь с проблемой центрирования нескольких блоков расположенных один за другим с помощью css-свойства float.
Стоит заметить, что приведенное решение работает в Opera 8+, Firefox 3+, IE 5.5+, что выгодно выделяет его среди других (с помощью css свойств table, table-row, table-cell, которые не поддерживаются устаревшими браузерами).
Суть метода заключается в использовании документированной особенности свойства position при установленном значении relative, а именно, то, что при использовании position:relative положение элемента устанавливается относительно его исходного места.
Для демонстрации метода создадим следующую структуру:
<div id="wrapper">
<div id="container">
<div class="block">Test Block 1</div>
<div class="block">Test Block 2</div>
<div class="block">Test Block 3</div>
</div>
</div>
Рассмотрим подробнее.
Контейнер div#wrapper нужен для предотвращения горизонтально полосы прокрутки, которая может появиться при большом количестве центрируемых элементов. К нему мы применим свойство overflow со значением hidden.
Описание css стиля для этого блока будет выглядеть следующим образом:
#wrapper {
overflow: hidden
}
Я не стал мудрствовать и следующему блоку назначил идентификатор #container. Из описания его свойств, вы поймете зачем он нужен.
#container {
position: relative;
float: left;
left: 50%;
border:1px #ccc solid
}
position: relative - как уже было сказано выше, определяет, что позиционирование (left: 50%) будет производиться относительно начального положения объекта.
Таким образом, блок #container получает динамическую ширину от суммы вложенных в него элементов (float: left) и сдвигается вправо (left: 50%) на 50% ширины родителя, относительно его исходного местоположения.
border:1px #ccc solid - в нашем примере используется для большей наглядности.
Рассмотрим правила для блоков, которые нам предстоит центровать.
.block {
position: relative;
float: left;
right: 50%;
background: #eee;
padding: 10px 20px;
border: 2px white solid
}
position: relative - используем для тех же целей.
float: left - нужен для того, чтобы блоки стали в одну строку, друг за другом слева направо.
right: 50% - сдвигает элемент влево на 50% от ширины родителя, что и дает эффект центрирования.
Остальные свойства, border и padding, используются для визуального оформления.
