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

Современные стандарты разметки страниц не запрещают использование табличной верстки, тем не менее, верстка слоями, по сути, стала обязательным стандартом при создании сайтов. Кроме очевидных преимуществ, вытеснение табличной верстки принесло и некоторые новые большие и маленькие проблемы. Одна из них - горизонтальное выравнивание структуры блоков в странице. Рассмотрим пару практических способов установить слой по центру ширины страницы.
Как 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>
Источники:
  • Как выровнять див вертикально по центру внутри другого дива?

Совет 2 : Как сделать сайт по центру

Большинство страниц сегодня верстаются с помощью слоев (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>
Видео по теме

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

При верстке 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
Каким бы способом вы ни воспользовались, убедитесь, что во всех браузерах ваш сайт работает корректно. Если он по каким-то причинам неправильно отображается в одном из них – укажите это.
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500