Иногда, возникают случаи, когда необходимо выровнять слой по центру страницы или другого слоя, без указания фактического размера в единицах. В моем случае нужно было реализовать отцентрованное главное меню сайта, в котором может изменятся количество элементов, а следовательно и ширина.
Так как в ходе задачи css (margin:0 auto;) для выравнивания не подходит, так как без указания ширины он растягивается на всю страницу.
Сразу скажу что этот метод мной был позаимствован на примере одного шаблона от широкоизвестной студии
И так, HTML разметка:
-
<div class="container"> <!-- слой внутри которого будем выравнивать-->
-
<div class="center1">
-
<div class="center"> <!--Слой который необходимо выровнять-->
-
</div>
-
</div>
-
</div>
CSS
-
.container {overflow-x: hidden;} /*на случай если появится горизонтальная прокрутка*/
-
.center1{float:left;
-
position:relative;
-
left:50%;} /*Смещаем блок на 50% в право*/
-
.center{position:relative;
-
left: -50%;} /*Смещаем целевой блок на 50% влево относительно слоя center1*/
P/S Не проверял в 6 ишаке, в остальных же браузерах работает?