
L'idée est de mise au point dans un DIV, une image avec le positionnement absolu { position: absolu; }. Pour ce faire, tout d'abord est Assign, à la div qui contiendra l'image, un positionnement relative, empêchant ainsi le positionnement absolu de l'image est pour le conteneur parent élément qui a le positionnement relatif prochaine, ou à défaut, à la corps.
En supposant que nous avons le code suivant avec un div et l'image au sein de la même:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
Le style appliqué au conteneur et l'image est comme suit:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
Pour voir le résultat avec certains des exemple de, Nous allons modifier le code HTML en assignant une bord et un taille à la div, ainsi que l'ajout d'un Itinéraire et un taille à l'image. Il devrait ressembler à ceci:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
et, puis, le résultat:


Laissez-nous un commentaire ou d’entrer à laForum