Совет 1: Как выровнять сайт по центру

При верстке web-мастеру приходится прилагать немалые усилия, чтобы сайт одинаково хорошо выглядел при разном разрешении экрана. Оптимальным решением является выровнять все содержимое по центру страницы.
Инструкция
1
Способ выравнивания по центру зависит от способа верстки. Можно воспользоваться тегами <div> или <table>. Конечно, проще заключить все содержимое в тэг <center>, но он давно устарел, и нет гарантии, что все будет правильно работать. Наиболее современный способ – использование технологии CSS.
2
Тэг <div> выделяет часть кода в один блок, позволяя изменять вид содержимого, задавая фрагменту один шрифт, цвет, фон и т.д. При блочной верстке все содержимое тэга <body> помещаем в тэг <div>. В <div> задаем выравнивание атрибутом align. Выглядеть это будет так:
<body>
<div align=”center”>Содержание сайта</div>
</body>.
3
Также центровку можно задать при помощи средств CSS. Для этого нужно создать отдельный файл таблиц стилей или разместить все в том же HTML файле, в тэге <head>. Код будет выглядеть следующим образом:
<head>
<style type="text/css">
* {margin: 0; padding: 0;} <!--обнуляем все отступы-->
body {
text-align: center; <!-- выравниваем текст по центру-->
}
div {
width: 700px; <!--задаем ширину содержимого сайта-->
margin: 0 auto; <!--задаем отступы справа и слева, чтобы сработало выравнивание по центру-->
}
</style>
4
При табличной верстке центрирование задается с помощью таблиц в тэге <table>. Код будет таким: <table align=”center”>Содержание сайта</table>. Таблица будет расположена по центру страницы, соответственно и ее содержимое тоже. Также можно задать ширину любого блока, указав ее с помощью параметра width.
5
Выбирая ширину страницы, не забывайте, что у пользователей разрешение экрана может сильно отличаться от вашего. Иногда, чтобы не ошибиться с размером, следует задать все в процентном соотношении. Это особенно удобно, если у вас простой сайт.
6
Каким бы способом вы ни воспользовались, убедитесь, что во всех браузерах ваш сайт работает корректно. Если он по каким-то причинам неправильно отображается в одном из них – укажите это.

Совет 2: Как div выровнять по центру

Современные стандарты разметки страниц не запрещают использование табличной верстки, тем не менее, верстка слоями, по сути, стала обязательным стандартом при создании сайтов. Кроме очевидных преимуществ, вытеснение табличной верстки принесло и некоторые новые большие и маленькие проблемы. Одна из них - горизонтальное выравнивание структуры блоков в странице. Рассмотрим пару практических способов установить слой по центру ширины страницы.
Вам понадобится
  • Начальные знания языка HTML
Инструкция
1
Один из вариантов решения задачи выравнивания какого либо слоя (блока DIV) по центру окна открытой страницы обходится только средствами HTML (HyperText Markup Language - «язык разметки гипертекста»). Нужно поместить блок внутрь тега <center>. Простейший код страницы, сверстанный таким способом, может выглядеть, например, так:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<title>Выравнивание DIV по центру</title>
</head>
<body><center>
<div style="margin:auto; width:300px; height:100px; background:#CC0;"></div>
</center></body>
</html>
2
Другой вариант использует средства CSS (Cascading Style Sheets - «каскадные таблицы стилей»). В стиле выравниваемого слоя надо задать автоопределение величины отступа от границ окна. Код такой страницы в простейшем виде может быть, например, таким:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<title>Выравнивание DIV по центру</title>
</head>
<body><div style="width:300px; height:100px; background:#fc0; margin: 0 auto;"></div></body>
</html>
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500