Выравнивание текста в HTML

Выравнивание элементов в HTML

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом. Пришло время разобраться с тем, как выравнивать текст на странице HTML. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег <center></center>. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами <center></center>:

<html>
<head>
<meta charset="utf-8"/>
<title>Выравнивание элементов в HTML</title>
</head>
<body>
  <p>Текст с левой стороны</p>
  <center>
	<p>Центральный текст</p>
  </center>
</body>
</html>

После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег <center> - значит должны быть и теги <left>, и <right>. Заключив содержимое в теги <left></left> вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег <left>, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега <left> он просто его пропустил. Тегов <left> и <right> не существует.

Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера <div>, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
Элемент <div> является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры <div>. У тега <div> есть атрибут align, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left, center, right. Давайте напишем код, где расположим элементы в различных частях браузера:

<html>
<head>
<meta charset="utf-8"/>
<title>Выравнивание элементов в HTML</title>
</head>
<body>
<div>Текст, расположенный слева</div>
<div align="center">Текст, расположенный по центру</div>
<div align="right">Текст, расположенный справа</div>
</body>
</html>

В данной статье вы научились выравнивать текст на html-странице.

Домашнее задание: выведите в правой части браузера 1 заголовок первого уровня и 1 заголовок второго уровня.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Комментарии:

Один комментарий

  • Возможный вариант домашнего задания:

    Выравнивание элементов в HTML

    Текст, расположенный слева
    Заголовок 1-го уровня
    Заголовок 2-го уровня

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *