Как я могу использовать CSS для вертикального центрирования текста в привязке внутри LI? ⇐ CSS

[Anonymous]

Вариации на этот вопрос задавались много раз. Вертикальное центрирование с помощью CSS — непростая задача.

У меня есть конкретный сценарий, связанный со списком, отображаемым горизонтально. Разметка такая:

Код: Выделить всё

  [list]
[*][url=javascript:void(0)]Fribble Fromme[/url]
[*][url=javascript:void(0)]Fobble[/url]
[*][url=javascript:void(0)]Foo Fickle Pickle[/url]
[/list]

Стиль такой:

Код: Выделить всё

  ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}

Результирующий список выглядит следующим образом:




Но я хочу, чтобы все поля были одинаковой высоты, и я хочу, чтобы текст был вертикально по центру в каждом поле. Я могу установить высоту блока, добавив стиль высоты для элементов A. Результат выглядит следующим образом:




...это близко к тому, что я хочу, но вертикального центрирования не происходит.

Я могу установить высоту строки для текста, как предложено в этом сообщении, чтобы выполнить вертикальное центрирование. Я даже могу выбрать разные значения высоты строки для разных элементов A, если знаю, какой из элементов получит несколько строк текста. Но я не знаю, какие из них потребуют нескольких строк.

Как мне расположить его по центру, если некоторые элементы A содержат переносимый текст?

Подробнее здесь: https://stackoverflow.com/questions/760 ... ithin-a-li