Codehelper

Programmierung · Anleitungen · Codeschnipsel

Div Box mittig ausrichten / zentrieren

22.01.2009 · HTML · CSS
Div Box mittig ausrichten / zentrieren

Um eine Div Box horizontal mittig auszurichten, setzt man margin:auto. Dies funktioniert allerdings nur dann, wenn das umgebende Element also z.B. eine Breite von 100% besitzt. Zentriert wird immer releativ zum umgebenden Element.

Damit alles korrekt funktioniert ist auch ein korrekter Doctype wichtig, z.B.

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Das Beispiel mal insgesamt:



<!DOCTYPE html 

     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>

<style type="text/css">

body

{

 width:100%;

 height:100%;

 padding:0;

 margin:0;

}



.divbox_mittig

{

 height:100px;

 width:100px;

 background-color:#000000;

 margin:auto;

 text-align:center;

 vertical-align:middle;	

}

</style>

<body>

<div class="divbox_mittig">

Mittig

</div>

</body>

</html>