Css - верстка і вирівнювання по центру сторінок сайту

Як зробити сайт → Уроки CSS → Верстка і вирівнювання по центру сторінок сайту

Верстка і вирівнювання по центру сторінки сайту є справою творчим і у початківців часто викликає труднощі. Тому давайте подивимося, як це зробити. Припустимо, ми хочемо зробити сторінку такої структури:

Наша сторінка складається з чотирьох блоків: шапки (header), меню (menu), вмісту (content) і низу сайту (footer). Для вирівнювання по центру сторінки ми помістимо ці чотири блоки в один головний блок (main):

CSS вирівнювання по центру сторінок сайту

  • На прикладі цієї структури розглянемо кілька варіантів.

    Верстка і центрування гумового сайту

    При верстці гумового сайту основний використовуваної одиницею виміру є -%, адже сайт повинен розтягуватися по ширині і займати весь вільний простір.

    Отже, ширина блоків "header" і "footer" становитиме 100% ширини екрану. Ширина блоку "menu" нехай буде 30%, а блок "content" повинен розташовуватися поруч з блоком "menu", тобто він повинен мати ліве поле (margin-left) шириною рівною ширині блоку "menu", тобто 30%.

    Щоб блоки "menu" і "content" розташовувалися поруч, зробимо блок "menu" плаваючим і пригорнемо його до лівого краю. Також поставимо кольору фону (background) для наших блоків. Тепер запишемо все це в таблицю стилів (на сторінці style.css)

    Висоту блоків задали умовно, щоб було видно результат. Подивіться на нашу сторінку в браузері:

    Якщо ви будете міняти розміри вікна браузера, то буде змінюватися ширина всіх блоків. Це не завжди зручно, тому що при розтягуванні блоку меню виникає порожнє місце. Тому частіше ширину блоку "menu" роблять фіксованою, давайте і ми так зробимо. Для цього замінимо в таблиці стилів значення відповідних властивостей:

    Тепер наша сторінка розтягується більш природно. При гумової верстки сторінки займають всю ширину екрану, тому вирівнювання по центру сторінки не потрібно.

    Але якщо хочеться можна зробити так, щоб ваша сторінка мала рівні відступи зліва і справа екрану. Для цього треба додати стиль блоку "main", який є контейнером для всіх інших блоків:

    Тепер наша сторінка виглядає так:

    Верстка і центрування сайту, фіксованої ширини

    У цьому випадку нам доведеться поставити фіксовані розміри наших блоків:

    Зараз наша сторінка притиснута до лівого краю екрана.

    В цьому випадку вирівнювання по центру сторінок сайту можна здійснити в такий спосіб. Згадаймо, що у нашої сторінки є тег "body", якому також можна задати ширину і якісь відступи.

    Зробимо так: поставимо тегу "body" ширину в 800 пікселів (як і у блоку "main") і лівий відступ (padding-left) в 50%. Тоді весь вміст блоку "main" буде відображатися в правій частині екрана (тобто від середини вправо):

    Щоб наш блок "main" розташовувався посередині екрану, треба щоб його середина співпадала з серединою тега "body". Тобто треба змістити блок "main" вліво на половину свого розміру. Ширина блоку "main" - 800 пікселів, значить треба задати йому властивість "margin-left: -400px". Так, це властивість може приймати негативні значення, тоді ліве поле зменшується (тобто зсувається вліво). А саме це нам і потрібно.

    Тепер таблиця стилів виглядає так:

    А наша сторінка в браузері розташовується рівно посередині:

    Ми розглянули два варіанти вирівнювання по центру сторінок сайту, насправді вони не є догмою. Ви можете поекспериментувати і придумати свій варіант, тільки перевіряйте його роботу в різних браузерах. На жаль, те що добре відображається в FireFox або Opera, може абсолютно незрозуміло відображатися в IE і навпаки. І про це треба пам'ятати.

    Удачі Вам у ваших творчих пошуках!