web-dev-qa-db-fra.com

HTML img align = "middle" n'aligne pas une image

Je veux qu'une image soit centrée et alignée. La taille de l'image est fixée en pixels.

Donc ce que je veux c'est comme ça-

1.

Ce que j'ai fait, c'est-

        <!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>

Mais je reçois-

22

Je veux qu'il soit réactif.

Quelqu'un peut-il m'aider s'il-vous-plaît?

htmlcssimage
11
Abrar Jahin

Que dis-tu de ça? J'utilise fréquemment la disposition de boîte flexible CSS pour centrer quelque chose.

<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>
24
Kagami Sascha Rosylight

L'attribut align=middle définit l'alignement vertical. Pour définir l'alignement horizontal à l'aide de HTML, vous pouvez envelopper l'élément dans un élément center et supprimer tout le CSS que vous avez maintenant.

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

Si vous préférez le faire en CSS, il existe plusieurs façons. Un simple consiste à définir text-align sur un conteneur:

<div style="text-align: center"><img src=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"></div>
28
Jukka K. Korpela

retirer float: left à partir de l'image css et ajoutez text-align: center propriété dans l'élément parent 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>
6
Girish

Remplacez "milieu" par "centre". Ainsi:

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

retirer le flotteur à gauche.

Modifié: suppression de la référence pour aligner le centre sur une balise d'image.

0
Asheliahut

il suffit de supprimer float: left et remplacer aligner avec margin: 0 auto et il sera centré.

0
shadeofblack

Vous n'avez pas besoin de align="center" et float:left. Retirez les deux. margin: 0 auto est suffisant.

0
K K

Essaye ça:

style="margin: auto"
0
Vadim Sychov