“вертикальный - выровняйтесь: середина” не выравнивается к середине в Firefox
Отображение только одного виджета с боковой панели - не вариант со стандартной функциональностью WP. Просто зарегистрируйте новую боковую панель в вашем funtions.php - смотрите здесь, как это сделать: https://codex.wordpress.org/Function_Reference/register_sidebar
3 ответа
Выравнивание по вертикали работает только так, как ожидается, для ячеек таблицы или элементов встроенного блока. Если вам нужна дополнительная информация, я предлагаю вам прочитать Понимание вертикального выравнивания или «Как (не) центрировать содержимое по вертикали» .
Редактировать: У вас что-то происходит, потому что это у меня работает как на 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 ·
Page Two ·
<a href="link">Page Three</a>
</div>
</body>
Примечание: размер шрифта раздела изменен на 0,4em с исходного 0,6em, чтобы подчеркнуть суть.
Firefox is rendering correctly. The vertical-align property is inline, which means it doesn't apply to block elements like
, etc). Try adding display: inline and see if that works.
Вертикальное выравнивание должно применяться только к элементам inline-block (я думаю, изображения - единственные вещи, которые имеют этот макет свойство по умолчанию), поэтому, чтобы использовать его для позиционирования встроенного элемента, сначала превратите его во встроенный блок, затем вы можете использовать поля и отступы для позиционирования, аналогично тому, как вы делаете обычный элемент блока:
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, и это лишь очень незначительный недостаток дизайна.