Горизонтальне і вертикальне центрування контейнера

Вертикальне вирівнювання завжди було проблемним місцем у CSS, так як властивість vertical-align діє тільки на inline-елементи (складаються з одного рядка) і не працює з блочними елементами. Однак вертикальне вирівнювання можна застосувати до клітинок таблиці, таким чином ми можемо використовувати це в наших інтересах в браузерах, які підтримують властивість display: table;, наприклад в Mozilla і Opera.


Ми також можемо приручити IE5-IE7 за допомогою умовних коментарів, написавши для нього окремі правила вертикального центрування.


Для початку я покажу що потрібно зробити для Мозілли. Ось лістинг основної таблиці стилів:


* {margin:0;padding:0}


/* mac hide */


html,body{height:100%;width:100%;}


/* end hide */


body {


background-color: #cccccc;


text-align:center;


min-height: 468px; / * для правильних браузерів * /


min-width: 552px; / * для правильних браузерів * /


}


#outer{


height:100%;


width:100%;


display:table;


vertical-align:middle;


}


#container {


text-align: center;


position:relative;


vertical-align:middle;


display:table-cell;


height: 468px;


}


#inner {


width: 552px;


background:red;


height: 468px;


text-align: center;


margin:0 auto;


border:1px solid #000;


}

Наш HTML код буде виглядати так:


<body>


<div id=”outer”>


<div id=”container”>


<div id=”inner”>


<h1> відцентрована по вертикалі і горизонталі </ h1>


</div>


</div>


</div>


</body>

Більшість з вищезгаданого повинно бути Вам знайоме, але нас цікавить зараз властивість display: table; в контейнері # outer. Саме воно говорить браузеру що треба відобразити блоковий елемент з характеристиками, властивими таблиць. Це дозволить нам використовувати властивість vertical-align: center;. Далі ми повідомляємо контейнер # container осередком таблиці (display: table-cell) і він відцентруйте вертикально щодо #outer.


Внутрішній елемент # inner ми Центруємо горизонтально за допомогою властивості margin: 0 auto;. Тепер Mozilla і Opera, відображають все так, як ми задумали. Звичайно погано що ми потребуємо додаткових обгортках, але це – самий безпечний спосіб вирішення завдання вертикального центрування. Описаний мною метод завжди залишає контент у вьюпорті, на відміну від інших методів.


IE не розуміє властивості display: table; і ігнорує його. Для того щоб змусити його центрувати сторінку по вертикалі додамо на сторінку код:

<!–[if IE ]> <style type=”text/css”> #container{top:50%} #inner{top:-50%;position:relative;} </style> <![endif]–>

 

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*