Выравнивание по центру

Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах.
Один из самых простых и удобных тегов - CENTER предназначен для выравнивания блока текста. С помощью этого тега также можно центрировать рисунки и таблицы. Исключение составляют элементы <img align=left ...> или <img align=right... > для которых выравнивание задается свойствами тега IMG. Так, если поместить элемент <img align=right... >; внутри тега CENTER, рисунок окажется выровненным по правому краю.

Пример 1. Центрирование с помощью тега CENTER

<center>
Данный текст будет выровнен по центру окна браузера, а нижележащий рисунок по правому краю.
<img src=no.gif width=100 height=100 align=right>
</center>

Формально CENTER должен использоваться только как параметр других блочных тегов (P, PRE и другие). Однако в браузере Netscape Navigator 2.0 CENTER был введен как самостоятельный тег. Это дополнение было призвано убрать лишний вертикальный отступ, который появляется при использовании блочных тегов.

Это простой пример центрирования текста с использованием тега CENTER

Как видно из данного примера, если вместо CENTER текст поместить внутрь параграфа (<p align=center>), появляется дополнительный вертикальный отступ между горизонтальной линией и этим текстом.

CENTER не входит в спецификацию HTML. В "официальном" HTML форматирование, такое как выравнивание текста должно производится через атрибуты тегов (например, <p align=center>) или с использованием стилей. Тем не менее, этот тег обрел право на существование. Однако после опубликования спецификации HTML 4 W3 Консорциум рекомендовал воздержаться от использования тега CENTER, а вместо него использовать элемент <div align=center>... </div>

Пример 2. Центрирование с помощью тега DIV

<hr>
<div align=center>
Выравнивание текста по центру с помощью тега DIV
</div>
<hr>

Еще один способ центрирования заключается в использовании стилей. Стили представляют собой инструкции, которые позволяют управлять атрибутами форматирования как шрифт, цвет, выравнивание и др. Пример переопределения тега P для центрирования текста.

Пример 3. Центрирование с помощью стилей

<head>
<style type="text/css">
p { text-align: center; }
</style>
</head>
<body>
<p>Теперь, когда вы будете использовать тег P с вышеуказанным стилем, текст параграфа будет выровнен по центру окна браузера </p>
</body>

Главная страница

Выравнивание по центру

Статьи про заработок

Начинающему Web - мастеру

Виды обмана в интернет

Остальное