Позиционирование текста в меню

[KorPaEv]

Всем привет!
Значит создал менюшку, отрисовал ее картинкой, т.к.размер будет пока фиксированный , тянуться не будет.

интересует, как мне спозиционировать текст в этой менюшке. Длинна слов разная, а в каждом блоке меню он должен находиться по центру.Какие идеи?
Я делал так: див с картинкой меню - далее в нем див для текста - далее в этом диве список - далее флоатом сделал горизонтальным его и отступы между элементами списка делал паддингами. Но проблема что они не центрируются и список сваливается на другую строку.

[Naive]

я бы сделал таблицей

[JTG]

<ul>
    <li><a href="">item</a></li>
    <li>...</li>
    <li>...</li>
</ul>

li - display:block + background-image,
а - display:block + text-align:center (или display:table-cell, если нужно ещё вертикальное центрирование)

[KorPaEv]

Сообщение от JTG

<ul>
    <li><a href="">item</a></li>
    <li>...</li>
    <li>...</li>
</ul>

li - display:block + background-image,
а - display:block + text-align:center (или display:table-cell, если нужно ещё вертикальное центрирование)

вконце не понятно что делаем?
список итемов кроде все норм а дальше?

[JTG]

http://jsfiddle.net/mRbut/

Чтоб в горизонтальном меню элементы не переползали на вторую строку, когда не влезают в контейнер, можно сделать так: http://jsfiddle.net/JyXSU/2/ (в IE, наверное, будут траблы)

[KorPaEv]

Сообщение от Naive

я бы сделал таблицей

спасибо всем, последовал совету Naive все заработало и не так много дивов вышло!

<div id="menu">                         
                                <table cellpadding="0" cellspacing="0">
                                        <tr>
                                        <td><a href="#">Печати</a></td>
                                        <td><a href="#">Штампы</a></td>
                                        <td><a href="#">Факсимиле</a></td>
                                        <td><a href="#">Визитки</a></td>
                                        </tr>
                                </table>
                        </div>

div#menu
 
        {
        margin:15px 15px 30px 15px;
        position:relative;
        background:url(../img/menu.png) no-repeat left top;
        width:770px;
        height:45px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:24px;
        font-weight:bold;
        }
 
div#menu table   
 
        {
        width:100%; /*ширина всей таблички относительно 800 растгивается на 100%*/
        }
        
div#menu table td        
 
        {
        width:25%; /*ширина колонки относительно 100%*/
        }
 
div#menu td a
 
        {
        display:table-cell; /*мнимая табличка*/
        text-align:center;
        vertical-align:middle;
        width:195px; /*ширина ячейки*/
        height:45px;
        text-decoration:none;
        color:#333333;
        }
 
div#menu td a:hover
 
        {
        background:url(../img/text_ahref.png) no-repeat center top;
        color:black
        }

[KorPaEv]

Кстати сразу вопрос по кроссбраузерности!
Везде все норм, кроме ИЕ7, там текст уходит в угол менюшки и не тянется процентным позиционированием, как решить проблему?

[TranceSmile]

Побеспокойтесь о кросбраузерности. В IE8 текст ссылок стает в 2-3 раза больше. Я не могу представить что будет в ie6

[KorPaEv]

Сообщение от TranceSmile

Побеспокойтесь о кросбраузерности. В IE8 текст ссылок стает в 2-3 раза больше. Я не могу представить что будет в ie6

Так вот я и спрашиваю для ИЕ как решить эту проблуму?