как отцентрировать резиновый DIV внутри другого

Pangea .kz 2012 M10 18
1982
0
3
0

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

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

Так как в ходе задачи css  (margin:0 auto;) для выравнивания  не подходит, так как без указания ширины он растягивается на всю страницу.

Сразу скажу что этот метод мной был позаимствован на примере одного шаблона от широкоизвестной студии

И так, HTML разметка:

 
  1. <div class="container"> <!-- слой внутри которого будем выравнивать-->
  2. <div class="center1">
  3. <div class="center"> <!--Слой который необходимо выровнять-->
  4. </div>
  5. </div>
  6. </div>

CSS

  1. .container {overflow-x: hidden;} /*на случай если появится горизонтальная прокрутка*/
  2. .center1{float:left;
  3. position:relative;
  4. left:50%;} /*Смещаем блок на 50% в право*/
  5. .center{position:relative;
  6. left: -50%;} /*Смещаем целевой блок на 50% влево относительно слоя center1*/

P/S Не проверял в 6 ишаке, в остальных же браузерах  работает?

Оцените пост

3
Дальше