Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Выравнивание содержимого тегов

Как я и обещал ранее, в этом уроке вы узнаете как можно выровнять по горизонтали содержимое любого HTML-тега на странице не используя устаревший атрибут align. Как вы возможно уже догадались, мы опять будем использовать стили (CSS), а точнее наш любимый атрибут style.

Итак, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

Пример выравнивания содержимого тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Выравнивание содержимого тегов</title>
</head>
<body>
<h5 style="text-align:center">Заголовок по центру.</h5>

<p style="text-align:right">Текст параграфа прижимается вправо.</p>

<p style="text-align:center">Параграф по центру.</p>
</body>
</html>

Результат в браузере

Заголовок по центру.

Текст параграфа прижимается вправо.

Параграф по центру.

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline). Почему? А помните мы недавно выяснили, что ширина встроенного элемента равна его содержимому? Соответственно получается, что этому самому содержимому просто некуда будет выравниваться и браузер элементарно проигнорирует ваши «художества». :)

Домашнее задание.

  1. Создайте заголовок статьи, двух ее разделов и одного подраздела в первом разделе. И пусть заголовок статьи располагается по центру страницы.
  2. Установите для всей страницы шрифт Arial, а для всех заголовков — Times и пусть они будут написаны курсивом.
  3. Цвет текста заголовка статьи поставьте #FF6600, разделов #6600FF, а подраздела оставьте неизменным.
  4. Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
  5. Выровняйте второй параграф по центру, третий — по правой стороне, а четвертый по обоим.
Меняем цвет текста и фона← Содержание →Цитаты и обрыв строки