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

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Выравнивание по центру, по левому или правому краю помогает упорядочить контент на странице. В этом мануале мы покажем вам, как это делается в HTML.

Чтобы выровнять текст на веб-странице, можно использовать атрибут style и свойство text-align.

К примеру, следующий фрагмент текста выровняет фразу «Sample text» по центру:

<p style="text-align:center;">Sample text</p>

Чтобы выровнять контент по левому или правому краю, вместо center укажите left или right.

В этом мануале мы используем свойство text-align, чтобы выровнять по центру изображения и текст, расположенные в верхней части нашей тестовой страницы.

Чтобы сделать это, мы должны добавить свойство text-align в элемент <div>, который определяет цвет фона, а также содержит изображение профиля, заголовок, подзаголовок и ссылку.

Найдите этот элемент <div> в файле index.html и добавьте в него выделенное свойство text-align:

<!--First section-->
<div style="background-color: #00bfff; height: 480px; padding-top: 80px; text-align: center;">
<img style="height: 150px; border-radius: 50%; border: 10px solid #FFFFFF;" src="https://www.8host.com/blog/wp-content/themes/wp-8host-new/img/logo.svg;" alt="This is an 8host logo, which consists of black 8 character and the word host in front of a blue cloud." />
<h1 style="font-size:100px; color:white; margin:10px;">My First Site</h1>
<p style="font-size:30px; color: white;"><em>I did it!</em></p>
</div>

Скопируйте и добавьте только выделенный атрибут text-align (так как контент вашего HTML-сайта может отличаться от нашего тестового сайта). Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:

This is an 8host logo, which consists of black 8 character and the word host in front of a blue cloud.

My First Site

I did it!

Теперь вы знаете, как центрировать и выравнивать текст. Этот навык позволит вам оформить контент вашего сайта в виде разделов (по традиции принято центрировать вступления, заголовки, начальные разделы сайта и т.п.). В следующем мануале мы попробуем создать среднюю часть сайта.

Tags: ,

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