HTML img align = "middle" не выравнивает изображение

Я хочу, чтобы изображение было выровнено по центру. Размер изображения фиксирован в пикселях.

Итак, что я хочу, это как this-

1.

Что я сделал is-

        <!DOCTYPE html>
<html>
<body>

    <img
        src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
        width="42" height="42"
        align="middle"
        style="float: left;
          position: relative;
          display: block;
          margin-left: auto;
          margin-right: auto;
          z-index: 1;"
        >

</body>
</html>

Но я getting-

22

Я хочу, чтобы это было отзывчивым.

Кто-нибудь может мне помочь?

Ответы

Ответ 1

Как насчет этого? Я часто использую CSS Flexible Box Layout для центрирования чего-либо.

<div style="display: flex; justify-content: center;">
  <img src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png" style="width: 40px; height: 40px;" />
</div>

Ответ 2

Атрибут align=middle устанавливает вертикальное выравнивание. Чтобы установить горизонтальное выравнивание с помощью HTML, вы можете обернуть элемент внутри элемента center и удалить все имеющиеся у вас CSS.

<center><img src=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"></center>

Ответ 3

удалите float: left из изображения css и добавьте свойство text-align: center в родительский элемент body

        <!DOCTYPE html>
<html>
<body style="text-align: center;">

    <img
        src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
        width="42" height="42"
        align="middle"
        style="
          
          display: block;
          margin-left: auto;
          margin-right: auto;
          z-index: 1;"
        >

</body>
</html>

Ответ 4

удалить float влево.

Отредактировано: удалена ссылка для выравнивания центра на теге изображения.

Ответ 5

просто удалите float: left и замените align на margin: 0 auto, и он будет центрирован.

Ответ 6

Вам не нужны align="center" и float:left. Удалите оба из них. margin: 0 auto.

Ответ 7

Измените "середина" на "центр". Вот так:

<img align="center" ....>

Ответ 8

Попробуй это:

style="margin: auto"