вертикальное выравнивание текста в div

[JIEX]

Здравствуйте, помогите сделать вот такое меню(желательно использовать ul li

Я сделал вот такое, но он далеко не такое как нужно:

Нужно что бы там где пункт меню в две строчки так и отображалось в две строчки. Как сделать такое для IE7? Все что нашел в гугле, ничего не помогло.

                <div id="down-menu">                   
                    <ul>
                        <li><a href="#">Меритель (СИТ)</a></li>
                        <li><a href="#">Лабораторное оборудование</a></li>
                        <li><a href="#">Разметка</a></li>
                        <li><a href="#">Оснастка</a></li>
                        <li><a href="#">Режущий инструмент</a></li>
                        <li><a href="#">Слесарный инструмент</a></li>
                        <li><a href="#">Пневмоинструмент</a></li>
                        <li><a href="#">Оборудование</a></li>
                    </ul>               
                </div>

#down-menu{
    background: #eace15;
    height: 39px;
    border: 1px solid black;
}
#down-menu ul{
    width: 1000px;
    height: 39px;
    margin: 10px 0 0 30px;
}
#down-menu li{
    display: table-cell;
    vertical-align: middle;
    list-style: none;
}
#down-menu a{
    color: #000;
    text-decoration: none;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
}

 

[UDAV]

<br> поставить, не?
либо задать ширину для li чтоб длинное само переносилось

 

[bork75]

#down-menu li{
    display: table-cell;
    vertical-align: middle;
    list-style: none;
    text-align:center;
    width:100px
}

 

[JIEX]

#down-menu li{
    display: table-cell;
    vertical-align: middle;
    list-style: none;
    text-align:center;
    width:100px
}

Дело в том, что display: table-cell; и vertical-align: middle; не поддерживаются в IE7, так что данный способ не подходит.

 

[mdss]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[ndvkerch]

Для ie7 можно сделать свой ксс через "иф ие7" и выравнивать посередине с помощью отступа от верха (паддинг или маргин что больше подойдет) но нужно будет добавить 2 класса для li с одной строчкой и 2 строчками. Както так ерез жопу но можно сделать но лучше объяснить заказчику что ну его **х

 

[HYDRA]

margin: пропиши сюда #down-menu li сколько нужно. потом вроде норм будет;
пример: margin-left:20px; margin-right:20px;
А кто знает если сюда <div id="down-menu"> прописать align="justify" он повлияет на li или нет?

Добавлено через 1 минуту
если повлияет, то надо #down-menu li ограничения в ширину поставить max-width и min-width

 

[dixi]

обычно выходят из положения line-height - ом, а вот по поводу 2 строчек, если только классы ставить другие там, где 2 строчки

 

[JIEX]

Сделал вот так:

Нужно вот так:

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

HTML
                <div id="down-menu">
                    <ul>
                        <li><a href="#">Меритель (СИТ)</a></li>
                        <li><a href="#">Лабораторное оборудование</a></li>
                        <li><a href="#">Разметка</a></li>
                        <li><a href="#">Оснастка</a></li>
                        <li><a href="#">Режущий инструмент</a></li>
                        <li><a href="#">Слесарный инструмент</a></li>
                        <li><a href="#">Пневмоинструмент</a></li>
                        <li><a href="#">Оборудование</a></li>
                    </ul>
                </div><!-- #down-menu-->

CSS
#down-menu ul{
    border: 1px solid black;
    text-align: center;
    background: #eace15;
    height: 38px;
}
#down-menu li{
    line-height: 5px;
    margin: 0 5px 0 0;
    display: inline;
}
#down-menu a{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
    text-decoration: none;
    color:#000;
    font: 12px Verdana,Arial,Helvetica,sans-serif;
}

 

[МихалычЪ]

Можно использовать expression
применить к li

padding-top:expression(([высота блока]-this.offsetHeight)<0?"0px":(([высота блока]-this.offsetHeight)/2)+"px");