HTML5 и вертикальное выравнивание? Исправлено сейчас? - PullRequest
10 голосов
/ 25 августа 2010

Я приехал из мира и искал ресурсы в Google о создании нескольких оберток для вертикального выравнивания контента - однако кажется, что это действительно ужасно.

Есть ли более простой способ с HTML5? Есть ли какая-то реализация, которая использует что-то вроде менталитета HBox / VBox? Я видел, что есть примеры для не-то есть браузеров - есть ли совместимый способ?

Как, черт возьми, кто-то в здравом уме делает HTML сейчас? Это беспорядок!

//// РЕДАКТИРОВАТЬ

Я наконец-то понял, как выровнять по вертикали весь блок по экрану, как я выяснил, как вертикально центрировать элементы списка.

Я пытался выровнять этот 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 элементы списка игнорируют height: css, а при использовании float: ссылки внутри li не выравниваются по вертикали. Нужно ли размещать элементы div внутри li, чтобы они также располагались вертикально по центру?

Ответы [ 4 ]

11 голосов
/ 21 ноября 2011

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

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

4 голосов
/ 08 февраля 2011

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

1 голос
/ 09 декабря 2011

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

Это не будет работать на IE7 и более ранних версиях, но, эй, кого это волнует ??

1 голос
/ 25 августа 2010

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

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


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

...