Кодировщик веб-страницы использует язык гипертекстовой разметки, чтобы сообщить веб-браузеру функциональное назначение каждого элемента на странице, такого как абзац, заголовок или список. Начиная с HTML 4, каскадные таблицы стилей предоставили кодировщику способ сообщить браузеру, как должен выглядеть каждый из этих элементов, отдельно от определения того, что они из себя представляют. Страница может иметь разные стили CSS для разных типов устройств, таких как мобильные телефоны и настольные компьютеры, что позволяет изменять внешний вид страницы без необходимости кодировщику изменять HTML. Используйте свойства CSS для центрирования изображения.

Шаг 1

Поместите тег «img» в файл HTML, где вы хотите, чтобы ваше изображение отображалось на веб-странице. Он должен быть между тегами body и после тегов h1. Например,

<тело>

Это ваш текст.

определяет изображение с именем photo.jpg шириной 170 пикселей и высотой 50 пикселей. Это первая вещь на странице после верхнего заголовка.

Шаг 2

Используйте атрибут CSS «margin», чтобы определить пространство вокруг элементов страницы, таких как изображения. Значение «auto» для атрибута поля указывает веб-браузеру автоматически определять объем пространства. Итак, определяет, что пространство вокруг изображения определяется браузером.

Шаг 3

Используйте свойство display, чтобы определить способ отображения элемента страницы. Значение «блок» для свойства отображения указывает веб-браузеру отображать элемент на отдельной строке с пробелами над и под ним. Итак, определяет то же изображение, но с добавлением "display:block;" теперь размещает его на отдельной строке.

Шаг 4

Просмотрите веб-страницу в нескольких разных браузерах, чтобы убедиться, что изображение расположено по центру правильно.

Совет

Включите описание изображения в тег «alt». Это делает вашу страницу более доступной для читателей с нарушениями зрения и гарантирует, что ваш код соответствует стандартам.