"vertical-align: middle" не выравнивается по середине в Firefox

Я пытаюсь выровнять текст разных размеров по вертикали, однако 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 &#183;
    Page Two &#183;
    <a href="link">Page Three</a>
</div>

Снимок экрана: снимок экрана http://www.doheth.co.uk/files/valign.jpg

ОБНОВЛЕНИЕ: просто для того, чтобы быть ясным, я знаю больше или меньше, как работает vertical-align, т.е. я уже знаю общие заблуждения.

Из более подробного исследования кажется, что самый простой способ исправить эту проблему - обернуть более крупный текст в span и установить для него vertical-align. Два дочерних элемента .categoryLinks затем выравниваются относительно друг друга. Если кто-то не может показать лучший способ без дополнительной разметки?

Ответы

Ответ 1

Вертикальное выравнивание работает, как и ожидалось, в ячейках таблицы или элементах встроенного блока. Если вам нужна дополнительная информация, я предлагаю вам прочитать Понимание вертикального выравнивания или "Как (не) для вертикального центра содержимого" .

Изменить: У вас есть что-то еще, потому что это работает на меня, как на Firefox. Я даже отбросил размер шрифта SECTION: вниз, и он по-прежнему сосредоточен. Вы использовали Firebug, чтобы увидеть, что влияет на него другой CSS?

Это работает так:

<html>
<head>
<style type="text/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.4em;
        font-style: normal;
        vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
        <em>SECTION:</em>
        Page One &#183;
        Page Two &#183;
        <a href="link">Page Three</a>
</div>
</body>

Примечание: размер шрифта раздела изменен на 0.4em из оригинала 0.6em, чтобы подчеркнуть точку.

Ответ 2

Firefox корректно выполняет рендеринг. Свойство vertical-align является встроенным, что означает, что оно не применяется к блочным элементам типа <div> (и <p> и т.д.). Попробуйте добавить отображение: inline и посмотрите, работает ли это.

Ответ 3

Вертикальное выравнивание должно применяться только к элементам встроенного блока (я думаю, что изображения - это единственные вещи, которые имеют это свойство макета по умолчанию), поэтому, чтобы использовать его для размещения встроенного элемента, сначала превратите его в встроенный блок, то вы можете использовать margin и padding, чтобы расположить его так же, как и обычный элемент блока:

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;

           display:inline-block;
        vertical-align:top;
        font-style: normal;
        padding: 2px 0 0 0;

}

Вы должны немного настроить его для Firefox 2, но это из-за примера рейера firefox, не поддерживающего веб-стандарты. С другой стороны, вы не могли потрудиться с настройкой, поскольку мало кто по-прежнему использует ffx2, и это лишь очень незначительный недостаток дизайна.

Ответ 4

Я исправил эти проблемы, просто удалив:

 white-space: nowrap;

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

vertical-align: middle;

Ответ 5

У меня была та же проблема. Это работает для меня:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>