Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Ein floatendes Element mit variabler Breite mit css zentrieren
Wer stand nicht schonmal vor der Schwierigkeit ein floatendes Element mit variabler Breite zu zentrieren. (zum Beispiel bei einer Paginierung, die breiter wird, je höher die Zahlen werden). Nach ein wenig recherche habe ich die Lösung für das Problem gefunden. Man muss das Element in ein anderes Element packen siehe Codebeispiel:
<div class="containerOuter">
<div class="centeredElement">
Some Text
</div>
</div>
Nun kommen wir zum interessanten Teil, nämlich dem CSS:
.containerOuter {
position: relative;
float: left;
left: 50%;
}
.centeredElement {
position: relative;
float: left;
left: -50%;
}
Das Ganze funktioniert wie folgt:
Der Äußere Container wird 50% nach rechts verschoben, wodurch unser zu zentrierendes Element an der linken Ecke in der Mitte ist. Wir wollen aber das beide Mitten übereinander liegen und müssen deshalb dem zu zentrierenden Container wieder 50% seiner Breite nach links verschieben.
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar