CSS: Elemente mittig platzieren

HTML-Veteranen kennen noch das Tag <center> oder den Parameter align=”center”, um Elemente auf einer Seite mittig auszurichten. Unter CSS kann man mit text-align:center Text mittig ausrichten. Doch wie geht das mit einem Block-Element wie <div>? Probieren Sie es damit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>CSS mittig</title>

<style type="text/css">

.mittig {margin: 0 auto;

padding: 2px;

width: 200px;

border: 1px solid black}

</style>

</head>

<body>

<div class="mittig">

Ab in die Mitte.

</div>

</body>

</html>

Die Doctype-Definition strict am Anfang ist notwendig, damit der Internet Explorer mit den CSS-Anweisungen zum Zentrieren zurechtkommt. Die Zeile 

margin: 0 auto

ist für das horizontale Ausrichten des Blocklevel-Elements zuständig. Wichtig ist, für das zu zentrierende Element eine Breite mit anzugeben, sonst funktioniert nichts.

Ähnliche Beiträge