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

Хоча є властивість CSS вертикальне вирівнювання, вона не працює, як атрибут VAlign в HTML таблиці. CSS властивість вертикального вирівнювання не здається, щоб бути в змозі тільки вирішити цю проблему:

Визначення проблеми

Тобто області (наприклад, <div>) з відомою висотою в сторінку
внутрішній об'єкт (як правило, довгий текст в <div>) знаходиться всередині області, і я не знаю його висоту (наприклад, тому що його зміст створюється динамічно з бази даних)
Я хочу центром об'єкт по вертикалі в межах області
без використання HTML таблиць.

Немає загального рішення було відомо до вересня 2004 року. Я виявив, що їду додому на вулицю Уїлсон.

Показати приклад вертикального центрування у Вашому браузері.

Ідея

Запорукою рішення для Internet Explorer 6, 7 або примха режиму полягає в наступному: внутрішній об'єкт абсолютно позиціонується в половину площі висоті. Тоді переміщується вгору на половину його висоти. Неправильна інтерпретація висоті власності в старших Internet Explorer використовується в якості ознаки тут (враховується висота взята в якості основи процентного зростання вкладених тегів). Один додатковий вкладений тег <div> необхідні для тих дослідників.

Рішення для стандартних браузерів, таких як Mozilla, Opera, Safari і т.д. (в тому числі 8 IE, 9, 10 і молодше) абсолютно інша. Вся територія (верхня <div>) встановлено, що буде відображатися у вигляді таблиці (дисплей: стіл, частина CSS2). Внутрішній об'єкт вибраний як елементу таблиці (на дисплеї: комірки таблиці). Тепер - є ключова ідея - це можливість використовувати вертикальне вирівнювання власності на такі таблиці відображаються елемента в стандартних браузерах. (Internet Exlorer 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), в 7 Opera, 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 class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" 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>

Див цей приклад в браузері

Легенда для квітів:

CSS стилів для кожного браузера
CSS стилів для стандартних браузерів
CSS стилів тільки для Internet Explorer 6, 7 і чудасії (з № рубати)

Результат так виглядає:

будь-який текст
будь-якої висоти
будь-який контент, наприклад, отримані від DB
всі центрирован

Див цей приклад в браузері

Давайте зробимо це структурний і без хаків

(ПРИМІТКА: це вірне рішення описане нижче не працює в 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>

І дійсно структуровану стилі:

Див дійсні наприклад, в браузері (вона виглядає так само, як останній).

Колір легенда:

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

CSS2 селектор # значення [ID] еквівалентно значенню селектора #, але Internet Explorer 6 ігнорує ці типи селекторів з [ID]. Загалом: синтаксис * [Foo] означає будь-який елемент з атрибутом Foo. Будь-який елемент HTML # щось повинні мати атрибут ID, за визначенням, набір в "щось". Це трюк - # значення [ID] працює в стандартних браузерах тільки (аналогічно працює значення [клас]).

Там в CSS майнове становище встановлено в абсолютних або відносних для Internet Explorer. Код позицію: статичні отримати це назад на значення за замовчуванням в стандартних браузерах (властивість топ не працює, то).

Обидва вертикальних і горизонтальних центрування

Основний код буде таким же, вам просто потрібно додати деякі додаткові правила CSS. Якщо ваша сторінка в стандартному режимі, додайте цей код:

Як ви, напевно, бачите, це є найбільш поширеним методом горизонтального центрування - авто лівого і правого поля. Оскільки поля потребує просторі в Firefox і Opera, вам потрібно встановити ширину # зовнішню справ. Якщо 100% не відповідає вашим потребам, використовувати будь-які інші значення.

Важливо, щоб встановити деякі належного ширину # внутрішній. Цей урок про вертикальної центрування об'єкта з невідомої висоти. Я припускаю, що ви знаєте, ширина об'єкта (у більшості випадків вам просто вирішити, наскільки широко воно має бути). Ви можете використовувати значення пікселів, або відсоток ширини. Якщо центрі об'єкта тільки невідомий розмір зображення, вам не потрібно встановлювати ширину.

Якщо ви використовуєте примха режиму відтворення сторінки (режим залежить! Doctype, як ви знаєте), доданий код повинен бути трохи більше, тому що примха режимі Exploder не розуміють авто поля, але має один хороший помилку в тексті вирівнювання інтерпретації, а не . Цей код повинен працювати як для стандартних і чудасії режимі:

Будь ласка, зверніть увагу, що це тільки частина коду, яка у вас є, щоб додати до попереднього прикладу. Якщо ви ліниві, щоб об'єднати коди, див. повний приклад в браузері: вертикальне і горизонтальне центрування. Ви знаєте, я ледачий теж.

Як центрі вертикально на висоту вікна

Точно так само і просто додати стиль:

Здається, що зовнішня # декларація повинна бути достатньою, але це не так. Тіло і HTML декларація встановлює 100% від висоти вікна в якості основи для наступного відсоток. Зараз краще не встановлювати переповнення: прихований (як у прикладі вище), тому що, коли зміст буде вище, ніж вікна, то воно було б неможливо прокрутити далі.

Відношення

Спроби центру по вертикалі:

10 CSS трюки
Один рядок вертикальної центрування
Попередній atempts вертикального центрування за допомогою CSS (спасибі за натхнення)

Приклади:

Додаткова інформація

Вперше опублікований 21 вересня 2004, Оновлено 23 Жов 2006 та 25 травня 2008 року. Основні поновлення 6 грудня 2012 в тому числі виправлення коду в діючий приклад. Я буду оновлювати цю статтю з додатковою інформацією, якщо хочете.

Автори:

Душан Яновського
ака Yuhu

[email protected]
www.jakpsatweb.cz

Переведено з http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Домашня сторінка