nicht angemeldet
Hallo Jeas,
Tach,
| if both margins are 'auto', their computed values are equal.
teilweise hast du sogar recht. ;-)
margin:auto; heisst margin:0,X,0,X; wobei 'X' hier für auto steht.
wo du recht hast, ist dass auto hier wirklich gleich sein sollte.
allerdigs es steht nach wie vor nirgenwo geschrieben dass 'gleich' eine zentrierung bewirken sollte. gleich kann ebenso 0 wie 50% oder 100% bedeuten.
da steht ganz genau, wie es berechnet wird:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
Was allerdings auch Björn Höhrmann nicht beachtet hat, ist folgender Satz:
| If 'width' is set to 'auto', any other 'auto' values become '0' and
| 'width' follows from the resulting equality.
Und width ist per default 'auto'.
daher ist die annahme, dass margin:auto; etwas zentrieren sollte, eine irrige. offensichtlich sind auch die browserhersteller an der meinung, denn sie haben ziemlich alle 0 für auto genommen.
kommt drauf an.
Folgendes zentriert korrekt (Unter Annahme der Standardwerte)
Mozilla und Opera können es. IE 6 (wie so vieles) nicht:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>zentriert</title>
<style type="text/css"><!--
div {width:100%;}
table {margin:auto;}
--></style>
</head>
<body>
<div>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>
Hier sieht man, warum ein einfaches margin:auto nicht zum zentrieren eines divs reicht:
wenn nämlich div-Bereiche non-replaced elements sind, haben sie per default incl. Box usw. 100% Breite und damit ist margin:auto tatsächlich margin:0.
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>zentriert</title>
<style type="text/css"><!--
div {margin:auto; width:20%; border:thin solid;}
table {margin:auto;}
--></style>
</head>
<body>
<div>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>
Jens