Центрирование изображения по горизонтали с помощью «центра»

Question

У меня проблемы с центрированием изображения по горизонтали. Это мой код:

<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;" class="center">

Что я делаю не так? Спасибо за ваше время.

Answer 1

Просто добавьте тег p перед изображением и добавьте к нему стиль.

 <p style="text-align:  center;">
     <img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px;height:225px;>
 </p>

Answer 2

Вам необходимо подать left & right margin на auto;

Решение:

margin:0 auto;

display:block

<div style="border:solid 1px red">
<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;margin:0 auto;display:block">
</div>

Answer 3

Если вы хотите выполнить стилизацию in-line , вы можете использовать center tag

<center>
<img src="https://dummyimage.com/300x200/000/fff" alt="johnson johnson" style="width:300px; height:225px;">
<center>

Answer 4

Вы можете добавить это

<style>
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
</style>

Я просто создаю ваш учебный центр, чтобы он центрировал изображение