«vertical-align: middle» не выравнивается по центру в Firefox - PullRequest
Новая
       19

«vertical-align: middle» не выравнивается по центру в Firefox

24 голосов
/ 09 апреля 2009

Я пытаюсь выровнять текст разного размера по вертикали, однако 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>

Скриншот: screenshot
(источник: doheth.co.uk )

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

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

Ответы [ 5 ]

15 голосов
/ 09 апреля 2009

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

Редактировать: У вас есть что-то еще происходит, потому что это работает для меня, как и в 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 голосов
/ 09 апреля 2009

Вертикальное выравнивание должно применяться только к элементам встроенного блока (я думаю, что изображения - единственные элементы, которые имеют это свойство макета по умолчанию), поэтому, чтобы использовать его для позиционирования встроенного элемента, сначала превратите его во встроенный блок, тогда вы можете использовать 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, и это только очень незначительный недостаток дизайна.

2 голосов
/ 09 апреля 2009

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

(и

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

1 голос
/ 10 апреля 2014

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

 white-space: nowrap;

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

vertical-align: middle;
0 голосов
/ 26 января 2013

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

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