Ответ 1
Почему бы вам не попробовать использовать display: box с box-align:center, это CSS3, поэтому не каждый браузер поддерживает его (только Chrome, FireFox и Safari)
HTML5 и выравнивание по вертикали? Исправлено?
Я родом из мира и смотрю на ресурсы google о том, чтобы делать несколько оберток для вертикального выравнивания контента, но похоже, что это действительно уродливо.
Есть ли более простой способ теперь с HTML5? Есть ли какая-то реализация, которая использует что-то вроде менталитета HBox/VBox? Я видел, что есть примеры для браузеров, отличных от ie, - есть ли уступчивый способ?
Как теперь кто-то в здравом уме делает HTML? Это беспорядок!
////EDIT
Наконец-то я выяснил, как вертикально выравнивать всю ячейку над экраном, как я выясняю, как вертикально центрировать элементы списка.
Я пробовал два метода для выравнивания этого html:
<nav>
<ul>
<li><a href="#!/home">Home</a></li>
<li><a href="#!/link1">Link #1</a></li>
</ul>
</nav>
один, используя display: inline, другой - float: left (внутри контейнера). При использовании inline кажется, что элементы списка игнорируют высоту: css, а при использовании float: ссылки внутри li не выравниваются по вертикали. Нужно ли разместить div внутри li, чтобы они также попадали в центр вертикали?
Ответы
Ответ 2
Вы можете сделать свойство line-height равным высоте LI с отображением: inline-block для LI. Когда вы это сделаете, текст будет находиться в середине строки, линия будет одинаковой высоты LI, текст будет вертикально посередине.
Ответ 3
HTML5 действительно не имеет ничего общего с компоновкой элементов, например, с вертикальным выравниванием содержимого. Как и прежде, разметка создается CSS.
CSS - это совершенно другая спецификация из HTML5, поэтому нет, ничего не изменилось.
Если у вас возникли проблемы с реализацией определенного макета, задайте конкретный вопрос, и мы, вероятно, можем помочь.
Ответ 4
вы можете установить внешний элемент для отображения: table и внутренний элемент для отображения: table-cell. затем, на элементе table-cell, установите vertical-align: middle; все его содержимое будет вертикально центрировано.
Это не будет работать на IE7 и ранее, но, эй, кому это нужно.