Центровка div-меню в div'e

[rolph]

Есть менюшка, которая в div'e:

<div class="menu">
<ul>
<li class="hide">
<a title="Первый пункт" href="/p">Первый пункт</a>
</li>
<li class="hide">
<a title="Второй пункт" href="/v">Второй пункт</a>
</li>
<li>
<a title="Третий пункт" href="/t">Третий пункт</a>
</li>
<li class="hide">
<a title="четвертый пункт" href="/ch">четвертый пункт</a>
</li>
<li class="last">
<a title="пятый пункт" href="/p">Пятый пункт</a>
</li>
</ul>
</div>
</div>

Её стиль:

.menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#333333 none repeat scroll 0 0;
height:40px;
margin:0 auto;
position:relative;
width:1000px;
}
.menu ul {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
list-style-type:none;
margin:0;
padding:0;
}
.menu ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
color:#FFFFFF;
display:block;
float:left;
line-height:160%;
margin:0;
padding:0;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border-right:1px dashed #666666;
color:#999999;
display:block;
font-size:100%;
line-height:160%;
padding:10px 20px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
.menu ul li a:hover {
color:#FFFFFF;
}
.menu ul li.active a {
color:#FFFFFF;
}

Сейчас получается, что менюшка равняется и съезжает влево:

Можно ли средствами css выравнять равномерно по всему div'у?

[Justnewone]

Есть, отказаться от флоат и дисплей:блок в пользу дисплей:инлайн-блок и родителю техт-алайн:центер. Подробнее можно неполеница тут на сайте поиском или у гугла "кроссбраузерный inline-block"

[rolph]

Есть, отказаться от флоат и дисплей:блок в пользу дисплей:инлайн-блок и родителю техт-алайн:центер. Подробнее можно неполеница тут на сайте поиском или у гугла "кроссбраузерный inline-block"

Оно? _ttp://www.alexilin.ru/cross-browser-inline-block/

[Justnewone]

бинго!

[rolph]

бинго!

Попробывал display: inline-block для li.

Всё тоже самое...

Попробывал добавить width для ul, отцентровалось. Но это опять же грубо, а если будет меняться кол-во пунктов, будет перенос на 2ую строку?...

Edited July 30, 2009 by rolph

[Justnewone]

Попробывал display: inline-block для li.

Всё тоже самое...

Попробывал добавить width для ul, отцентровалось. Но это опять же грубо, а если будет меняться кол-во пунктов, будет перенос на 2ую строку?...

Че тоже самое? непонятно. Вы же видите, что по ссылке есть рабочий пример, или с ним "Всё тоже самое..."?

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

[rolph]

Че тоже самое? непонятно. Вы же видите, что по ссылке есть рабочий пример, или с ним "Всё тоже самое..."?

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

Тоже самое, в плане того, что с inline-block, что без него... Я пока остановился на варианте:

.menu ul {
padding:0; 
margin:0 auto;
width:650px;
list-style-type: none;
background:transparent none repeat scroll 0 0;
}

.menu ul li {
position:relative;
background:transparent none repeat scroll 0 0;	
display: inline-block;
margin:0;
padding:0;
line-height:160%;
color:#FFFFFF;
}

Насчёт проверки ширины с помощью js - спасибо за идею.

[Justnewone]

.menu ul {
text-align:center;
}

...родителю техт-алайн:центер...

width:650px; уберите пока, будете назначать налету, если понадбица.

[Игорь Ермаков]

Разбиритесь с размерами родителя и вашего блока.

[psywalker]

rolph

Дай картинку того, что хочешь получить

[rolph]

rolph

Дай картинку того, что хочешь получить

Либо так:

либо так:

Вторая лучше

[Justnewone]

Либо так:

либо так:

Вторая лучше

Тогда не парьтесь и сделайте таблицей.

[psywalker]

Тогда не парьтесь и сделайте таблицей.

Присоединяюсь к мастеру!

Если боишься, что пунктов станет больше и будет перенос, то тогда делай таблицей 100%, даже не думай

[rolph]

Тогда не парьтесь и сделайте таблицей.

Таблицей всмысле <table> или display:table ?

[psywalker]

Таблицей всмысле <table> или display:table ?

Конечно же <table>