Sven Rautenberg: Elemente zentrieren

Beitrag lesen

Moin!

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Test</title>
<meta name="author" content="Standard">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="margin-left:auto; margin-right:auto">

<div style="width:50px; margin-left:auto; margin-right:auto;">

<img src="images/abfahrt.gif" width="50" height="20" alt="" border="0">
</div>
</body>
</html>

Was hab ich denn vergessen?

Das DIV ist, wenn keine Breitenangabe erfolgt, immer so breit, wie der maximal zur Verfügung stehende Platz. Links und rechts sind dann keinerlei Ränder mehr, deren automatische Verbreiterung für eine Zentrierung sorgen könnte.

Das obige Beispiel funktioniert auch nur im IE6, NS6/Mozilla und Opera.

margin:auto zentriert das Element innerhalb des äußeren Elements. Vielleicht hilft aber auch, das Bild innerhalb des DIVs zu zentrieren:

<div style="text-align:center;">

Im Zweifel hilft es immer, mit "background:farbe" dem Layer mal etwas mehr Sichtbarkeit zu verleihen, damit man sieht, wo es überall ist und wie groß.

- Sven Rautenberg