Расположить строку из div по центру страницы

@back191 · Регистрация: 20.03.2012

Author24 — интернет-сервис помощи студентам

Есть десяток блоков div, расположенных в одну строчку. Каким образом мне можно расположить все их по центру страницы? Размер страницы не фиксированный, поэтому желательно без отступов. Спасибо.

HTML5

                <div class="menu"    >
    
 
<div style="float:left; padding: 0px 0 0 3px ;" >
....
</div>
 
<div style="float:left; padding: 0px 0 0 3px ;"   >
....
</div>
 
 
<div style="float:left; padding: 5px 0 0 3px ;"   >
...
</div>
 
 
                </div>

Vovan-VE · 04.09.2012, 18:38

Убрать float, добавить display: inline-block; (персонально для IE7 придется задать display: inline; и zoom: 1; , если Вы на него рассчитываете). Родителю добавить text-align: center; .

@Бабуля · 04.09.2012, 18:52

А если отступы AUTO? То блоки всегда будут находиться по центру.

CSS

1 2	margin-left:auto; margin-right:auto;

Или я ошибаюсь?

Vovan-VE · 04.09.2012, 19:01

Не по теме:

Сообщение от Бабуля

А если отступы AUTO?

Если блок живет в нормальном потоке, ширина не auto, и еще осталось место (клиентская область родителя минус свои ширина, padding и border), то оно распределяется под margin:auto.

@back191 · 04.09.2012, 19:02 **[ТС]**

Спасибо, заработало. сделал вот так:

HTML5

<div class="menu"    >
    
<div style="display: inline-block; padding: 0px 0 0 3px ;  display: inline; zoom: 1;    " >
...
</div>
 
</div>

HTML5

.menu
{
text-align: center;
}

Если убрать display: inline; zoom: 1; , то работает во всех браузерах, кроме IE, НО, когда я добавляю- IE работает, а во всех остальных браузерах все едет. я туда воткнул
display: inline; zoom: 1;
? возможно сделать так чтобы во всех работало?
Спасибо.

Vovan-VE · 04.09.2012, 19:06

back191, А если будет мульён таких меню и в каждом по мульёну элементов, Вы правда будете копировать одно и то же триллион раз? Выносите всё в отдельный CSS файл:

HTML5

<ul class="menu">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
</ul>

CSS

ul.menu {
    list-style: none;
    text-align: center;
}
ul.menu > li {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	04.09.2012, 18:38	2
	Убрать float, добавить display: inline-block; (персонально для IE7 придется задать display: inline; и zoom: 1; , если Вы на него рассчитываете). Родителю добавить text-align: center; . 2

Vovan-VE
	04.09.2012, 19:01 #4
	Не по теме: Сообщение от Бабуля А если отступы AUTO? Если блок живет в нормальном потоке, ширина не auto, и еще осталось место (клиентская область родителя минус свои ширина, padding и border), то оно распределяется под margin:auto. 0

	04.09.2012, 19:06