“выровнять по вертикали:середина” не выравнивается по середине в Firefox
-
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 ·
Page Two ·
<a href="link">Page Three</a>
</div>
Скриншот:
(источник: 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 ·
Page Two ·
<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>