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, чтобы они также попадали в центр вертикали?

Ответ 1

Почему бы вам не попробовать использовать display: box с box-align:center, это CSS3, поэтому не каждый браузер поддерживает его (только Chrome, FireFox и Safari)

http://www.w3schools.com/cssref/css3_pr_box-align.asp

Ответ 2

Вы можете сделать свойство line-height равным высоте LI с отображением: inline-block для LI. Когда вы это сделаете, текст будет находиться в середине строки, линия будет одинаковой высоты LI, текст будет вертикально посередине.

Ответ 3

HTML5 действительно не имеет ничего общего с компоновкой элементов, например, с вертикальным выравниванием содержимого. Как и прежде, разметка создается CSS.

CSS - это совершенно другая спецификация из HTML5, поэтому нет, ничего не изменилось.

Если у вас возникли проблемы с реализацией определенного макета, задайте конкретный вопрос, и мы, вероятно, можем помочь.

Ответ 4

вы можете установить внешний элемент для отображения: table и внутренний элемент для отображения: table-cell. затем, на элементе table-cell, установите vertical-align: middle; все его содержимое будет вертикально центрировано.

Это не будет работать на IE7 и ранее, но, эй, кому это нужно.