Wie man ein Bild horizontal zentrieren, mit absoluter Positionierung, innerhalb eines div

Die Idee ist Fokus innerhalb einer DIV, ein Bild mit absolute Positionierung { Stellung: absolute; }. Dazu, Zunächst einmal ist Weisen Sie, auf das div-Tag enthält, die das Bild, eine Positionierung relative, und verhindert so die absolute Positionierung des Bildes ist für das Element übergeordneten Container, der relative Positionierung hat nächste, oder versagt, zu den Körper.

Vorausgesetzt, wir haben den folgenden Code ein Div mit Bild innerhalb desselben:

<div class="contenedor">
   <img class="imagen" src="" />
</div>

</div>

Die Formatvorlage der Container und das Bild ist wie folgt:

.contenedor {
   position: relative;
}

.imagen {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   margin:auto;
}

.contenedor {

position: relative;

}

.imagen {

position:absolute;

left:0px;

right:0px;

top:0px;

margin:auto;

}

Sehen Sie das Ergebnis mit einigen der Beispiel, Wir gehen zum Ändern den HTML-Code durch die Zuweisung einer Kante und eine Größe für das div-Tag, sowie das Hinzufügen einer Strecke und eine Größe auf das Bild. Es würde wie folgt aussehen:

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

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

und, dann, Das Ergebnis: