#css
#css
Вопрос:
Я создаю меню. Выглядит примерно так:
<div>
<ul>
<li><a>menu/<br/>item</a></li>
</ul>
</div>
Я хочу расположить текст по центру по вертикали. Обычно я использую
ul li { height: 50px; line-height: 50px; }
например. Но, очевидно, это не работает, поскольку это
тег в меню. Мне нужно, чтобы текст выглядел как
menu/
item
в меню. Есть идеи, как это решить? Спасибо!
Комментарии:
1. отображение в виде ячейки таблицы — это способ
Ответ №1:
Вы могли бы просто установить меньшую высоту строки и одинаковое заполнение сверху и снизу, вот так:
ul li {
padding: 20px 0;
line-height: 14px;
}
Этот метод предполагает, что каждый список элементов содержит две строки текста, чтобы все они были одинаковой высоты.
Это выглядело бы примерно так — http://jsfiddle.net/ajcw/fVamh /
Комментарии:
1. Спасибо, но забыл упомянуть, что некоторые из них составляют 1 строку. Однако я добавил класс к двойным строкам с помощью jquery и изменил заполнение. Я думаю, это работает нормально..
Ответ №2:
Вертикальное выравнивание поддерживается только в ячейках таблицы. Вы можете либо настроить отступы для перемещения текста (будет работать только для вашего конкретного размера шрифта, и если это изменится, вам придется заново настроить отступы), либо, как упоминал Дэн Эндрюс выше, вы можете использовать display: table-cell , однако это поддерживается только новыми браузерами, поэтому, в зависимости от вашей аудитории, это может оказаться неэффективным решением.
О поддержке ячеек таблицы см. QuirksMode.com