Як вирівняти сайт по центру
При верстці web-майстру доводиться докладати чималих зусиль, щоб сайт однаково добре виглядав при різному дозволі екрану. Оптимальним рішенням є вирівняти весь вміст по центру сторінки.
1
Спосіб вирівнювання по центру залежить від способу верстки. Можна скористатися тегами 60-div 62- або 60-table 62-. Звичайно, простіше укласти весь вміст в тег 60-center 62-, але він давно застарів, і немає гарантії, що все буде правильно працювати. Найбільш сучасний спосіб - використання технології CSS.
2
Тег 60-div 62- виділяє частину коду в один блок, дозволяючи змінювати вид вмісту, задаючи фрагменту один шрифт, колір, фон і т.д. При блокової верстці весь вміст тега 60-body 62- поміщаємо в тег 60-div 62-. В 60-div 62- задаємо вирівнювання атрибутом align. Виглядати це буде так:
60-body 62;
60-div align = "center" 62-Зміст сайту 60 / div 62;
60 / body 62-.
60-body 62;
60-div align = "center" 62-Зміст сайту 60 / div 62;
60 / body 62-.
3
Також центрування можна задати за допомогою засобів CSS. Для цього потрібно створити окремий файл таблиць стилів або розмістити все в тому ж HTML файлі, в тезі 60-head 62-. Код буде виглядати наступним чином:
60-head 62-
60-style type ="text / css" 62;
* {Margin: 0- padding: 0-} 60 -! - Обнуляем все отступи-- 62;
body {
text-align: center- 60 -! - Вирівнюємо текст по центру-- 62;
}
div {
width: 700px; 60 -! - Задаємо ширину вмісту сайта-- 62;
margin: 0 auto- 60 -! - Задаємо відступи справа і зліва, щоб спрацювало вирівнювання по центру-- 62;
}
60 / style 62-
60-head 62-
60-style type ="text / css" 62;
* {Margin: 0- padding: 0-} 60 -! - Обнуляем все отступи-- 62;
body {
text-align: center- 60 -! - Вирівнюємо текст по центру-- 62;
}
div {
width: 700px; 60 -! - Задаємо ширину вмісту сайта-- 62;
margin: 0 auto- 60 -! - Задаємо відступи справа і зліва, щоб спрацювало вирівнювання по центру-- 62;
}
60 / style 62-
4
При табличній верстці центрування задається за допомогою таблиць в тезі 60-table 62-. Код буде таким: 60-table align = "center" 62-Зміст сайту 60 / table 62-. Таблиця буде розташована по центру сторінки, відповідно і її вміст теж. Також можна задати ширину будь-якого блоку, вказавши її за допомогою параметра width.
5
Вибираючи ширину сторінки, не забувайте, що у користувачів дозвіл екрана може сильно відрізнятися від вашого. Іноді, щоб не помилитися з розміром, слід задати всі в процентному співвідношенні. Це особливо зручно, якщо у вас простий сайт.
6
Яким би способом ви не скористалися, переконайтеся, що у всіх браузерах ваш сайт працює коректно. Якщо він з якихось причин неправильно відображається в одному з них - вкажіть це.
Рада 2: Як div вирівняти по центру
Сучасні стандарти розмітки сторінок не забороняють використання табличної верстки, проте, верстка шарами, по суті, стала обов`язковим стандартом при створенні сайтів. Крім очевидних переваг, витіснення табличній верстки принесло і деякі нові великі і маленькі проблеми. Одна з них - горизонтальне вирівнювання структури блоків в сторінці. Розглянемо пару практичних способів встановити шар по центру ширини сторінки.
Вам знадобиться
- Початкові знання мови HTML
Інструкція
1
Один з варіантів вирішення завдання вирівнювання будь-якого шару (блоку DIV) по центру вікна відкритої сторінки обходиться тільки засобами HTML (HyperText Markup Language - «мова розмітки гіпертексту»). Потрібно помістити блок всередину тега . Найпростіший код сторінки, зверстаний у такий спосіб, може виглядати, наприклад, так:
Вирівнювання DIV по центру
2
Інший варіант використовує кошти CSS (Cascading Style Sheets - «каскадні таблиці стилів»). У стилі вирівнюючого шару треба задати автоопределение величини відступу від меж вікна. Код такої сторінки в найпростішому вигляді може бути, наприклад, таким:
Вирівнювання DIV по центру
Статті за темою "Як вирівняти сайт по центру"
Оцініть, будь ласка статтю