Я пытаюсь выровнять текст разных размеров по вертикали, однако Firefox отображает меньший текстовый путь выше середины.
CSS
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.6em;
font-style: normal;
vertical-align: middle;
}
HTML:
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
Снимок экрана: снимок экрана http://www.doheth.co.uk/files/valign.jpg
ОБНОВЛЕНИЕ: просто для того, чтобы быть ясным, я знаю больше или меньше, как работает vertical-align
, т.е. я уже знаю общие заблуждения.
Из более подробного исследования кажется, что самый простой способ исправить эту проблему - обернуть более крупный текст в span
и установить для него vertical-align
. Два дочерних элемента .categoryLinks
затем выравниваются относительно друг друга. Если кто-то не может показать лучший способ без дополнительной разметки?