Вертикальное центрирование в CSS

(CSS — Cascading Style Sheets)

Автор: Душан Яновски (Yuhu)

Окончательное решение Yuhu с небывалой высоты.

Хотя существует вертикальное выравнивание в CSS, так называемое vertical-align, оно не работает как атрибут VALIGN в таблицах HTML. И свойства CSS вертикального выравнивания, кажется, не в состоянии конкретно решить эту проблему.

Установление проблемы:

— есть область (например: <div>) с известной высотой на странице;

— внутренний объект (как правило, длинный текст в <div>) находится внутри области, и высота его неизвестна (например, потому, что его содержание создается динамически из базы данных);

— Я хочу, центрировать объект по вертикали в области без использования таблиц HTML;

— Общее заключение не было известно до сентября 2004 года. Я придумал его, пока ехал домой по улице Вильсона.

Идея

Залогом решения для Internet Explorer 6, 7 или режима совместимости заключается в следующем: внутренний объект абсолютно позиционирован в половину высоты области.

После чего, он улучшается на половину своей высоты. Неправильная интерпретация свойства высоты в старом Internet Explorer используется в качестве признака (учтите, высота берется как основа процентная высота вложенных тегов). А один дополнительный вложенный тег <div> необходим для Explorer-ов.

Решение же для стандартных браузеров, таких как Mozilla, Opera, Safari и т.д. (включая IE 8, 9, 10 и моложе) совершенно иное. Вся территория (верхняя <div>) установлена для отображения в виде таблицы (дисплей: таблица, часть CSS2). Внутренний объект установлен как хранитель заметок (display: table-cell). Теперь — есть ключевая идея — можно использовать свойство вертикального выравнивания для такого элемента таблицы в стандартных браузерах. (Internet Explorer 6, 7 или режим совместимости уже игнорирует эти свойства и не распознает его.)

Далее оба синтаксиса объединяются. Я использую, так называемый, хак с подчеркиванием Пикси (Pixy), но со знаком #. Свойство CSS написано также с # в начале (т.е. # позиция) и является видимой для IE 7 и для более старых версий. Такое письменное свойство является невидимым для любого другого стандартного браузера (например Explorer 6 или 7, # позиция: абсолютная; отличие от других браузеров).

Этот так называемый «подчеркивающий хак», кажется, действует, но если вы не хотите использовать его, то можете использовать более структурированный код, ниже в моем втором примере (к сожалению, не работающий для IE 7).

Другие типы браузеров, Internet Explorer 8 и помоложе не нужно взламывать, так как они поддерживают дисплей, хранитель заметок, должным образом.

Совместимость

Приведенный ниже код работает в Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 и 10 бета-версии, в Gecko-браузерах (Mozilla, Firefox, Netscape 7), в Opera 7, 8 и дальше, во всех Chrome -ах, Konqueror 3.3.1. (может ниже тоже) и в Safari (Win, IOS). Страница может быть HTML, HTML5 или XHTML, стандартная или в режиме совместимости.

Допустимый пример не работает в IE 7 в стандартном режиме (обновление 2012 года: около 3% клиентов). Если вы нашли какое-нибудь другое рабочее пространство для IE 7, пожалуйста, дайте мне знать.

Понятный код:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div style=»display: table; height: 400px; #position: relative; overflow: hidden;»>
<div style=» #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;»>
<div style=» #position: relative; #top: -50%»>
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

See this example in browser

Цвет:

CSS styles for every browser
CSS styles for standard browsers
CSS style only for Internet Explorer 6, 7 and quirk (with # hack)

Давайте сделаем это структурировано и без хаки

(ПРИМЕЧАНИЕ: правильное решение, расписанное ниже не работает в Internet Explorer 7 (стандартный режим), потому что IE7 не понимает табличных значений в дисплее устройства. Центральный объект слишком высокий, НО: . IE 7 используется только о 3% пользователей (2012) и число будет уменьшаться. Если вы все еще против пользователей IE7, пожалуйста, используйте неверное решение выше, напишите в режиме совместимости или воспользуйтесь условными комментариями HTML, чтобы как-то разделить свойства для IE 7.)

Первый пример вверху не очень хорош, но надеюсь, Вы его поняли. Можно написать код и иначе. Например:

<div id=»outer»>
<div id=»middle»>
<div id=»inner»>
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>

И, структурированный действующий стиль:

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>

Цвет

CSS style for Internet Explorer 6 only (or quirk)
CSS styles for standard browsers

Селектор CSS2 значения [ID] эквивалент селектора значения, но Internet Explorer 6 игнорирует эти типы селектора с помощью [ID]. Вообще Синтаксис * [Foo] означает любой элемент с атрибутом Foo. Любой элемент HTML должен иметь идентификатор атрибута ID по определению, установленный в «something». Это трюк — значение [ID] (#value[id]) работает только в стандартных браузерах (аналогично работает значение [class]).

Есть позиция устройства CSS полагающееся на абсолют или относительность Internet Explorer. Позиция кода: статистически возвращающееся в значение по умолчанию в стандартных браузерах (тогда верхнее свойство не работает).

Вертикальное и горизонтальное центрирование

Программный код будет таким же, нужно только добавить некоторые дополнительные екстра правила CSS. Если ваша страница в стандартном режиме, добавьте этот код:

Как вы, вероятно, видите, это наиболее распространенный горизонтальный метод центрирования — левый и правый край. Потому что краям необходимо пространство в Firefox и Opera, Вам необходимо установить ширину в #outer div. Если это на 100% не соответствует вашим потребностям, используйте любое другое значение.

Важно установить надлежащую ширину #inner. Этот пример о вертикальной центровке объекта с неизвестной высотой. Я предполагаю, что вы знаете ширину объекта (в большинстве случаев вы будете просто решать, насколько широким он должен быть). Вы можете использовать значения пикселей или ширину в процентах. Если в центрированном объекте только картинка неизвестного размера, то вам не нужно устанавливать ширину.

Если Вы используете режим совместимости рендеринга (как известно, режим зависит от Doctype), добавленный код должен быть немного длиннее, потому что режим совместимости Эксплоера не распознает авто поле. Хотя имеет хорошенькую безумную идею в интерпретации выравнивания текста. Этот код должен работать как в стандартном режиме так и в режиме совместимости

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

Как поставить центр вертикально в высоте окна

Тот же, путь, только добавьте стиль:

Кажется, что внешнее декларирование будет достаточным, но это не так. Боди и html занимают 100% высоты окна как базы для дальнейшего процентирования. Сейчас лучше не устанавливать переполнение: скройте (как в примерах выше), потому что когда контент, то есть содержание будет выше чем у окна, то он будет невозможен для прокрутки.

Оригинал статьи — http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Комментарии:

Amon Auto

Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?

Ответить

Добавить комментарий