Вирівнювання шару по центру

Влад Мержевич

Основне відмінність веб-сторінки від аркуша паперу полягає у їх розмірах. Якщо аркуш має фіксовану ширину і висоту, то щодо веб-сайту такого сказати не можна. Веб-документ відображається у вікні браузера і може змінювати свої розміри залежно від налаштувань операційної системи, типу монітора, встановленого роздільної здатності і т. д. Використання вирівнювання дозволяє проігнорувати вказану особливість і розміщувати елемент у краю вікна або по його центру.

Коли мова йде про використання шарів, то для вирівнювання у нашому розпорядженні є кілька способів - за допомогою відступів, через позиціонування, а також використовуючи атрибут align тега <div>.

Використання відступів

Якщо додати відступ до шару зліва за допомогою властивості margin-left, то візуально шар зсунеться на вказане значення праворуч. Знаючи ширину шару, його можна зсунути так, щоб шар розташовувався по центру веб-сторінки. Для цього від 100%, що складають загальну доступну ширину, потрібно відняти ширину шару у відсотках і отримане значення поділити пополам. Результат і буде значенням властивості margin-left (приклад 1).

Приклад 1. Використання margin-left 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вирівнювання</title>
  <style type="text/css">
   #centerLayer {
    margin-left: 30%; /* Відступ зліва */
    width: 40%; /* Ширина шару */
    background: #fc0; /* Колір фону */
    padding: 10px; /* Поля навколо тексту */
   }
  </style>
 </head>
 <body>
  <div id="centerLayer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

Як варіант, можна не вказувати ширину, а регулювати її за допомогою відступу зліва і справа (приклад 2).

Приклад 2. Використання відступів 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вирівнювання</title>
   <style type="text/css">
    #centerLayer {
     margin-left: 30%; /* Відступ зліва */
     margin-right: 30%; /* Відступ справа */
     background: #fc0; /* Колір фону */
     padding: 10px; /* Поля навколо тексту */
    }
   </style>
  </head>
  <body>
   <div id="centerLayer">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

У даному прикладі показано розташування шару шириною 40% по центру. Хоча сама ширина ніяк напряму не задається, вона визначається значенням властивостей margin-left і margin-right. Вони встановлюють відступ зліва і справа, щоб шар розміщувався по середині, їх значення повинні бути рівними.

Наступний спосіб більш універсальний і вже не залежить від того, які одиниці вимірювання використовуються для встановлення ширини. Для цього потрібно встановити відступ зліва і справа для шару рівним auto за допомогою стилевих властивостей margin-left і margin-right або універсальної властивості margin (приклад 3).

Приклад 3. Застосування значення auto 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вирівнювання</title>
  <style type="text/css">
   #centerLayer {
    width: 400px; /* Ширина шару в пікселях */
    margin: 0 auto; /* Відступ зліва і справа */
    background: #fc0; /* Колір фону */
    padding: 10px; /* Поля навколо тексту */
    text-align: left; /* Вирівнювання вмісту шару по лівому краю */
   }
  </style>
 </head>
 <body>
   <div id="centerLayer">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

У цьому прикладі ширина шару встановлюється 400 пікселів і вирівнюється по центру за допомогою значення 0 auto властивості margin. Перший аргумент встановлює нульовий відступ одночасно зверху і знизу від шару, а другий аргумент вирівнює шар по центру горизонталі вікна браузера.

Атрибут align тега <div>

Ще один спосіб розміщення по центру взагалі не потребує використання жодних стилів і пов'язаний з атрибутом align тега <div>. Вказуючи значення center, змушуємо вміст шару вирівнюватися по його центру. Тому потрібно створити два шари, один із яких буде служити контейнером для іншого, як показано в прикладі 4.

Приклад 4. Атрибут align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вирівнювання</title>
  <style type="text/css">
    #centerLayer {
     width: 400px; /* Ширина шару в пікселях */
     background: #fc0; /* Колір фону */
     padding: 10px; /* Поля навколо тексту */
     text-align: left; /* Вирівнювання по лівому краю */
    }
   </style>
  </head>
  <body>
  <div align="center">
    <div id="centerLayer">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
  </div>
 </body>
</html>

Знову ж таки, як і в разі використання властивості text-align, вирівнюватися по центру буде і текст всередині шару. Тому слід насильно задати йому необхідне вирівнювання через стилі. Ширину шару-контейнера задавати не потрібно, вона буде обчислюватися автоматично і займати всі доступні простори веб-сторінки.

Абсолютне позиціонування шару

При абсолютному позиціонуванні координати шару обчислюються відносно лівого верхнього кута вікна батьківського елемента або браузера, якщо батька немає. Шар, заданий з абсолютним позиціонуванням, може розташовуватися під основним текстом або, навпаки, поверх нього. Положення визначається за допомогою стилевої властивості z-index і дозволяє гнучко керувати положенням шару за умовною z-віссю. Таким способом зручно виводити на веб-сторінці різні підказки, виринаючі вікна, рекламу або плаваючі меню.

Спочатку слід вказати ширину і висоту шару за допомогою width і height. Розміри можна задавати в пікселях, відсотках або інших одиницях. Ширину, наприклад, можна визначити відсотках, а висоту в пікселях. Через цю особливість запропонований метод розміщення по центру є найбільш універсальним.

Наступний крок - встановлюємо абсолютне позиціонування шару через position: absolute. Положення шару слід визначити як 50% по горизонталі і вертикалі за допомогою властивостей left і top. Ці значення залишаються незмінними, незалежно від використаних одиниць вимірювання.

Оскільки координати шару визначаються від його лівого верхнього кута, для точного вирівнювання слід додати властивості margin-left і margin-top з від'ємними значеннями. Їх величина повинна бути рівною половині ширини шару (для margin-left) і висоти (для margin-top).

Щоб висота шару не змінювалась через його контент, включений overflow: auto, він додає смуги прокрутки, якщо вони будуть потрібні, висота при цьому залишається незмінною (приклад 5).

Приклад 5. Ширина шару в пікселях 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//

Часті запитання