"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 ·
    Page Two ·
    <a href="link">Page Three</a>
</div>

скриншот: скриншот http://www.doheth.co.uk/files/valign.jpg

обновление: просто чтобы быть ясно, я знаю более или менее как vertical-align работает, т. е. я уже знаю распространенные заблуждения.

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

24
css vertical-alignment

5 ответов

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

Edit: у вас есть что-то еще, потому что это работает для меня, как в Firefox. Я даже сбросил размер шрифта раздела: прямо вниз, и он по-прежнему центрирован. Вы использовали 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.4 em от исходного 0.6 em, чтобы подчеркнуть точку.

14

Firefox отображает правильно. Свойство vertical-align является встроенным, что означает, что оно не применяется к элементам блока, таким как

(и

и т. д.). Попробуйте добавить дисплей: inline и посмотреть, если это работает.

2

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

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 хотя, но это из-за того, что пример raer firefox не поддерживает сетевые стандарты. С другой стороны, вы не могли беспокоиться о настройке, так как немногие люди все еще используют ffx2, и это только очень незначительный недостаток дизайна.

2

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

 white-space: nowrap;

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

vertical-align: middle;
1

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

 <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>
0