Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре
окна браузера. Используем тег 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 текст поместить внутрь параграфа (<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>
|