Manchmal möchte man Bilder mittig ausrichten, was nicht unbedingt schwer ist. Jedenfalls in der horizontalen. Vertikal mittig positionieren ist da meist eher ein Problem. Ich möchte mit zwei verschiedenen Methoden zeigen, wie ein Bild in beiden Richtungen zentriert werden.
Html bild mittig ausrichten chrome. Querverweis: Text mittig, links, rechts oder im Blocksatz ausrichten So soll es aussehen: Bild mittig ausrichten (CSS) Im WebEditor von, kannst du dir das live ansehen und selbst anpassen. Bild mittig ausrichten: Webeditor Reine CSS Lösung zum zentrieren: HTML:
CSS: #dieBox { width: 250px; height: 250px; background-image: url(''); background-repeat: no-repeat; background-position: center center; border: 1px solid #000;} So sollte es aussehen: Bild mittig ausrichten (CSS) Es wird ein Bild mittels background-image geladen und das Element worin es sitzt, auf absolute Größe angepasst. Als Position bekommt es in der horizontalen center und der vertikalen den center Wert. (siehe auch in unsere CSS Referenz) Damit ist die background-position Eigenschaft wohl die beste, um Bilder zentriert in einem (DIV) Element anzuzeigen.