“выровнять по вертикали:середина” не выравнивается по середине в Firefox

StackOverflow https://stackoverflow.com/questions/732139

  •  06-09-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Редактировать: У вас происходит что-то еще, потому что у меня это работает так же, как и в 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,6em, чтобы подчеркнуть суть.

Другие советы

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

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

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

 white-space: nowrap;

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

vertical-align: middle;

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

 <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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top