Як зробити сайт по центру

Як зробити сайт по центру

Більшість сторінок сьогодні верстаються за допомогою шарів (div), тому проблема вирівнювання сайту по центру вікна браузера зводиться до задачі центрування того шару, який визначає ширину видимої області сторінки. Щоб він позиціонувався в середині вікна необхідно задати відповідні установки його батьківському елементу, або самому цьому блоку.

Вам знадобиться

Початкові знання мов HTML і CSS

Інструкція

  1. Помістіть шар, який потрібно позиціонувати по центру вікна, між відкриває і закриває частинами тега center, якщо хочете обійтися тільки засобами мови HTML (HyperText Markup Language — «мова розмітки гіпертексту»). Будемо виходити з того, що батьківським елементом шару, що визначає межі сторінки, є тіло цієї сторінки. Найпростіший варіант HTML-коду з використанням тега center в цьому випадку може виглядати, наприклад, так:

    <html>

     <head>

     <title> Сторінка по центру </ title>

     </ Head>

     <body>

    <center>

     <div style=»width:700px; height:400px; background:#0BB;»> текст сторінки </ div>

    </ Center>

    </ Body>

    </ Html>
  2. Використовуйте автовизначення розмірів відступу від меж вікна браузера, якщо хочете використовувати мову CSS (Cascading Style Sheets — «каскадні таблиці стилів») для вирівнювання сторінки по центру. Розміри відступів в CSS визначаються параметром margin. З попереднього зразка приберіть теги center і додайте в атрибут style шару, який визначає ширину сторінки, параметр margin зі значенням 0 auto:

    <html>

     <head>

     <title> Сторінка по центру </ title>

     </ Head>

     <body>

    <center>

     <div style=»width:700px; height:400px; background:#0BB; margin: 0 auto;»> текст сторінки </ div>

    </ Center>

    </ Body>

    </ Html>
  3. Звичайно, визначення стилю можна винести з атрибуту style і помістити в зовнішній файл або в заголовну частину документа (між тегами <head> і </ head>). У цьому випадку той же код буде виглядати, наприклад, так:

    <html>

     <head>

     <title> Сторінка по центру </ title>

     <style type=»text/css»>

      # PageFrame {

       width: 700px;

       height: 400px;

       background: # 0BB;

       margin: 0 auto;

     }

     </ Style>

     </ Head>

     <body>

    <center>

     <div id=»pageFrame»> текст сторінки </ div>

    </ Center>

    </ Body>

    </ Html>