Grundvoraussetzung um Elemente der Website mit CSS zu zentrieren ist natürlich, dass man mit CSS umgehen kann. Dieser Artikel setzt diese Fähigkeit voraus. Ein Parade-Beispiel für den Einsatzzweck dieser Anforderung ist das Logo, wenn man will, dass dieses sich stets in der horizontalen Mitte des jeweiligen Bildschirmes befindet, wenn das vom Theme nicht automatisch so vorgegeben ist.
Beispiel um ein Logo mit CSS horizontal zu zentrieren:
Zuerst sucht man sich die CSS Klasse aus dem Stylesheet, um diese dann entsprechend um die gewünschte Änderung zu ergänzen:
.site-branding .custom-logo-link {
display: block;
max-width: 200px;
margin-bottom: 10px;
}In den beiden CSS KLassen .site-branding und .custom-logo-link ist definiert, dass das Logo mit einer maximalen Breite von 200px angezeigt werden darf. Zusätzlich wurde ein unterer äußerer Abstand (margin) von 10px definiert. Mit diesem CSS-Code wird das Logo links-bündig auf der Website im Header angezeigt.
Änderung des CSS-Codes:
Um das Logo nun in die Mitte zu verschieben, fügen wir dem Code folgende Parameter hinzu:
margin-left: auto;
margin-right: auto;
Dies informiert den jeweiligen Brwoser darüber, dass das darin enthaltene Logo zentriert dargestellt wird. Der gesamte CSS-Code sieht nun so aus:
.site-branding .custom-logo-link {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}Dies funktioniert theoretisch natürlich auch in vertikaler Richtung:
margin-top: auto;
margin-bottom: auto;
… was in der Praxis eher weniger oft zum Einsatz kommt.
Bei sinnvollen Fragen dazu stehe ich wie üblich immer gerne zur Verfügung.
