Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
CSS: Ein Bild vertikal und horizontal in einem DIV zentrieren
#Tutorials#CSS#HTML
Möchte man ein Bild innerhalb eines Div-Container komplett zentrieren, also horizontal und vertikal, so ist das nicht immer leicht. Mit diesem kleinen CSS Trick und einem Helper-Div kann man es aber komplett mit CSS lösen.
Hier eine Demo:
Markup/CSS
<style>
.frame {
height: 27px; /* equals max image height */
width: 160px;
border: 1px solid #ccc;
white-space: nowrap;
line-height: normal;
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3aa4af;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
</style>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=250 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=25 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=23 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=21 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=19 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=17 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=15 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=13 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=11 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=9 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=7 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=5 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="logo-trans.png" height=3 />
</div>
Wie funktioniert das Ganze?
Hat man zwei
inline-blockElemente nebeneinander, kann man beide so anordnen, dass sie sich auf den anderen beziehen.Also kriegt man mitvertical-align: middleetwas in der Art:
Hat nun das äußere Element eine fixe Höhe (in
px,emorder sonstiger Einheit), kann man die Höhe der inneren Elemente mit%. setzen- Also fügt man
inline-blockmitheight: 100%an das erste Helper Div in einem Div, das eine fixierte Höhe hat (.frame, siehe oben) wird das zweiteinline-blockElement (unser Bild) vertikal daneben zentriert. - Da unser Helper keine Breite hat, ist das Bild dazu ebenfalls auch noch horizontal in der Mitte, mit einem
text-align:center.
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar