Datum: 08.10.2011, 18:22, Kategorie: Web-Entwicklung, Aufrufe: 138, Kommentare: 0
Element horizontal und vertikal mittig positionieren
Will man ein Element horizontal und vertikal mittig auf einer Seite positionieren, so kann man sich einem kleinen Trick bedienen und dabei negative Werte für die CSS-Eigenschaft margin ausnutzen. Dies funktioniert jedoch nur, wenn die Größe des Elements bekannt ist.Funktionsweise
Das Element, welches mittig positioniert werden soll, wird zunächst mit Hilfe der CSS-Eigenschaft position:absolute; absolut positioniert und anschließend die Werte von left und top auf 50% gesetzt. Nun wird die linke obere Ecke des Elements mittig auf der Seite positioniert. Um zu erreichen, dass das Element richtig mittig dargestellt wird, muss es nun noch jeweils um einen bestimmten Wert nach links und nach oben verschoben werden, nämlich jeweils um die halbe Breite bzw. Höhe (nun wird klar, warum bei dieser Methode die Größe des Elements bekannt sein muss). Dies kann erreicht werden, indem für die CSS-Eigenschaft margin negative Werte angegeben werden. In dem nachfolgenden Beispiel wird deutlich, wie dies in der Praxis aussehen kann.Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Element horizontal und vertikal mittig positionieren</title>
<style type="text/css">
.mittig {
position:absolute;
left:50%;
top:50%;
width:512px;
height:128px;
margin:-64px 0px 0px -256px;
/* */
background-color:red;
}
</style>
</head>
<body>
<div class="mittig"></div>
</body>
</html>
Element mittig positionieren