Как центрировать изображение в HTML

Соавтор(ы): Команда wikiHow

Атрибут align тега <html> считается устаревшим с появлением HTML5. Хотя этот атрибут по-прежнему работает в большинстве веб-браузеров, рекомендуется выравнивать изображения с помощью каскадных таблиц стилей (CSS). В этой статье мы расскажем вам, как центрировать изображения с помощью CSS и устаревшего тега align .

Метод 1

Метод 1 из 2:

CSS (рекомендуется)

Загрузить PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/4259849-1.jpg\/v4-460px-4259849-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/4259849-1.jpg\/v4-728px-4259849-1.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Добавьте HTML-код для изображения. Для выравнивания картинки вы воспользуетесь каскадными таблицами стилей (CSS), но разместить ее на странице придется с помощью HTML. Далее приведен пример использования тега <img> для вставки изображения в код: ^{[1]
X
Источник информации}
```
 < 
 img 
 src 
 = 
 "dog.jpg" 
 alt 
 = 
 "это картинка собаки" 
 class 
 = 
 "center" 
 > 
```
- Вместо dog.jpg подставьте название файла картинки, а после «alt» введите описание изображения. Значение center для «class» не меняйте, потому что вы создадите CSS-класс с этим именем.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/4259849-2.jpg\/v4-460px-4259849-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/4259849-2.jpg\/v4-728px-4259849-2.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Найдите CSS-код. Если на сайте есть отдельный CSS-файл, откройте его. Если нет, CSS-код, скорее всего, находится в верхней части HTML-файла внутри тегов <head> . Прокрутите до верхней части файла, чтобы найти теги <style> </style> .
- Если тегов <style> </style> нет, добавьте их. Прочитайте эту статью , чтобы получить дополнительную информацию.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/4259849-3.jpg\/v4-460px-4259849-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/4259849-3.jpg\/v4-728px-4259849-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Добавьте в CSS код для выравнивания картинки. Вместо «50%» можно ввести другое значение, чтобы изображение появилось на странице. Отцентрировать изображение со значением «100%» не получится, поэтому это число должно быть другим.
```
 . 
 center 
 { 
 display 
 : 
 block 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-right 
 : 
 auto 
 ; 
 width 
 : 
 50 
 % 
 ; 
 } 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/47\/4259849-4.jpg\/v4-460px-4259849-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/47\/4259849-4.jpg\/v4-728px-4259849-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Сохраните внесенные изменения. Сохраните HTML-файл и CSS-файл (если он есть). Так вы отцентрируете изображение.
- Также внутри тегов <img> можно добавить class="center" , чтобы отцетрировать другие изображения.
Реклама