HTML-Objekt nur mit CSS horizontal und vertikal zentrieren
Die Google-Suchanfrage “HTML Objekt zentrieren” bietet einem unendlich viele Möglichkeiten, ein oder mehrere HTML-Elemente zentriert darzustellen. Darunter finden sich die umständlichsten CSS-Hacks, ausufernde JavaScript-Lösungen oder dubiose und nicht ausgereifte “Lösungen” der Marke Eigenbau.
Doch auf der Website von ohne-css.gehts-gar.net fand ich eine einfache Möglichkeit, ein HTML-Element nur mittels HTML und CSS zu zentrieren. Das Element passt sich dann auch dymanisch Größenveränderungen des Browserfensters an und funktioniert in allen aktuellen Browsern, den Internet Explorer 6 mit eingeschlossen.
Der Aufbau im Code kann einfacher gar nicht sein; es wird ein zu zentrierendes HTML-Objekt sowie ein kleines Hilfs-DIV benötigt:
HTML-Code
<div id="distance"></div>
<div id="shell"></div>
Diese beiden Elemente müssen mit folgenden Styles angesprochen werden, um dein DIV in einer HTML-Datei letztendlich perfekt zentriert darzustellen. Dabei muss beachtet werden, dass das margin-bottom des #distance-Elements die Hälfte der Höhe des zu zentrierenden Elements beträgt, allerdings im negativen Bereich:
CSS-Code
#distance {
width: 1px;
height: 50%;
float: left;
margin-bottom: -240px /* Muss die Hälfte der Höhe des zu zentrierenden Objekts sein, in diesem Fall 480px durch 2 */
}
#shell {
clear: left;
width: 640px;
height: 480px;
margin: 0 auto;
position: relative
}
Das war es dann auch schon. Mit Hilfe der kleinen, unauffälligen #distance-Ebene wird das nächstliegende Objekt – die #shell-Ebene dynamisch im Browserfenster zentriert. Wenig Aufwand, große Wirkung – so lieben es Webdesigner!
Beispiel-HTML-Datei samt CSS herunterladen ( 2 KB )
Eine ausführlichere Erklärung findest du auf der Website von www.ohne-css.gehts-gar.net.
Thread closed