Felix Riesterer: Bild in der Mitte ausrichten

Beitrag lesen

SELF-Forum

Bild in der Mitte ausrichten

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

Liebe Sabine,

ich habe das erst diese Tage selbst gebraucht. Dabei hat es im IE natürlich mal wieder nicht geklappt - dort ist es mir aber inzwischen herzlich egal.

Damit das Bild horizontal mittig sitzt, reicht innerhalb des DIVs text-align: center; völlig aus, es sei denn, das IMG-Element ist in weiteren Elementen verschachtelt.

Das vertikale Zentrieren ist nicht ganz so einfach, denn vertical-align: middle; hilft nur ein Bisschen. Mit vertical-align wird das Bild nur innerhalb der Text-Zeile (es ist ja im Normalfall ein Inline-Element, verhält sich also in etwa wie ein Buchstabe) mittig nach oben und unten ausgerichtet. Daher muss man diese "Textzeile" auf die komplette Höhe des DIVs erweitern. Und das tut man mit line-height: 100%;!

.bildmitte {  
    text-align: center;  
    line-height: 100%;  
}  
.bildmitte img {  
    vertical-align: middle;  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

Beitrag melden
–
Informationen zu den Bewertungsregeln