Как центрировать изображение на экранах мобильных устройств (используя HTML)?

Question

Я работаю над рабочим проектом, используя интерфейс, который позволяет редактировать только HTML.Пользователи, просматривающие страницы, которые я создаю, будут просматривать их с мобильных устройств.Изображения, которые я пытаюсь разместить, находятся над абзацем.Все, что мне нужно, это чтобы изображение было отцентрировано.

Я создал пример, который выглядит по центру на большом экране, но слегка смещает изображение вправо на меньших экранах.Может ли кто-нибудь дать мне знать, что здесь происходит не так?

.image {
  width: 382px;
  height: 135px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

<img src="image.jpg">

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

Answer 1

Вы должны применить свои стили к вашему изображению

.image {
  width: 382px;
  height: 135px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

<img src="image.jpg" class="image">

Answer 2

Вам нужно @media, чтобы достичь этого.media изменит стиль CSS в зависимости от размера экрана.кстати, либо добавьте class image к вашему изображению, либо просто используйте img в таблице стилей CSS, которая не рекомендуется использовать только img , потому что это повлияет на вседругие изображения, так что просто используйте

HTML:

<img class="image" src="...">

CSS:

//you can change min-width and max-width based on your desires
@media (min-width: 1px) and (max-width: 767px) {
.image {
   text-align: center
   //you can add any other style in here
   }
}

Answer 3

Когда вы ставите точку (.) Впереди, она регистрирует это как имя класса.Так что просто добавьте класс с именем image в тег img.

<img src="image.jpg" class="image">