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

Практично завжди при верстці буває потрібно зробити так, щоб сторінка сайту, в тому випадку, коли її ширина буде менше дозволу екрану, вирівнювалася по центру.Як же це реалізувати?

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

Ми робимо блок div з id wrapper з шириною наприклад 800px, який буде обертати весь вміст сторінки.

На самому початку Обнуляємо все відступи — * {margin: 0; padding: 0}.Для body задаємо властивість text-align: center, щоб вирівняти його вміст по центру.А для блоку wrapper задаємо властивість margin: 0 auto, яке і вирівнює його по центру вікна браузера.

Таким способом можна вирівнювати будь-який інший елемент.

Вертикальне вирівнювання блоку

Тепер провертикальному вирівнюванні блоку div.Розберемо два випадки.У першому блок у нас має фіксовану ширину, а в другому він гумовий.

Вертикальне вирівнювання блоку div з фіксованими розмірами.

Якщо у блоку фіксована ширина, то тут все просто.Використовуємо наступний код.

Спочатку ми Обнуляємо все відступи і задаємо висоту і ширину body і html.Потім для наочності даємо тло блоку centered і плюс визначаємо йому ширину і висоту (600px на 400px).Задаємо position: absolute і зрушуємо лівий верхній кут блоку на 50% вниз і на 50% вправо.А тепер дуже значуще в дано методі властивість — негативний відступ зверху, рівний половині висоти блоку і зліва, рівний половині ширини блоку.

Вертикальне вирівнювання гумового блоку div.

Код тут

Спеціально для тега html задаємо display: table; показує, що елемент — це блокова таблиця.Потім прописуємо для body властивості, що вказують що елемент являє собою клітинку таблиці з вертикальним вирівнюванням по-середині.

Як завжди проблеми виникають з браузером IE, який не може працювати з властивістю display: table-cell.Саме для нього використовуються умовні коментарі <! — [If gte IE 6]> …