Как центрировать изображение с помощью программирования HTML

...

Используйте CSS, чтобы указать внешний вид веб-страницы.

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

Шаг 1

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

Видео дня

Это твой текст.

Описание картины

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Кончик

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