The next stumbling block is centering things. If you apply {text-align: center;} to a block, it will only center the contents of the block, and not the block itself. This is were {margin-left: auto;} and {margin-right: auto;} come in.
Note: {margin: auto;} doesn't work in IE5 quirks mode, but {text-align: center;} around a block does. See this example:
.heading {
text-align: center;
width: 50%;
color: white;
background: red;
font-weight: bold;
}
.center {text-align: center;}
.center1 {
margin-left: auto;
margin-right: auto;
width: 50%;
color: white;
background: red;
font-weight: bold;
}
.center2 {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50%;
color: white;
background: red;
font-weight: bold;
}
<p class="heading"><i>text-align:center;</i> inside a block only centers content</p>
<div class="center">
<p class="heading">centered with an <i>extra <div></i></p>
</div>
<p class="center1">centering with <i>margin:auto;</i></p>
<p class="center2">centering with <i>margin:auto;</i> and <i>text-align: center;</i></p>
<div class="center">
<p class="center2"><i>margin:auto;</i> and <i>text-align:center;</i> and an <i>extra <div></i></p>
</div>
Click here to see what it looks like
{margin: 0 auto;} should work, but I'm told that some older browsers only recognize {margin-left: auto; margin-right: auto;} but I haven't come across this myself.
This example has 8 boxes, each with an image 60 x 60px and margin=8px : border=1px : padding=4px.
8 x (60 + 8x2 + 1x2 + 4x2) should be equal to 688px wide, but it requires another 8px in width totaling 696px for it to work. I should also mention that this won't work in the old IE quirks mode.
dl {margin: 0; padding: 0;}
.thumbs {
width: 696px;
margin: 0 auto;
text-align: center;
}
.thumbs dd {
float: left;
margin: 8px;
border: 1px solid black;
padding: 4px;
background: white;
text-align: center;
font-family: monospace;
}
<dl class="thumbs">
<dd><img src="101.jpg" width="60" height="60"><br />101</dd>
<dd><img src="102.jpg" width="60" height="60"><br />102</dd>
<dd><img src="103.jpg" width="60" height="60"><br />103</dd>
<dd><img src="104.jpg" width="60" height="60"><br />104</dd>
<dd><img src="105.jpg" width="60" height="60"><br />105</dd>
<dd><img src="106.jpg" width="60" height="60"><br />106</dd>
<dd><img src="107.jpg" width="60" height="60"><br />107</dd>
<dd><img src="108.jpg" width="60" height="60"><br />108</dd>
</dl>
Click here to see what it looks like
Centering a form is quite easy using both {text-align: center;} and {margin-left: auto; margin-right: auto;}. If you use all percentage values, it will scale in different screen resolutions and won't look like a pea in a drum in 1024x768 and above.
<style type="text/css">
form {width: 70%; text-align: center; margin-left: auto; margin-right: auto;}
legend {color: black; padding-right: 5px;}
textarea {width: 94%; margin-top: 1%; margin-bottom: 1%;}
.spacer {padding: 0 10%;}
</style>
<form action="" method="post">
<fieldset>
<legend>Comments</legend>
<textarea name="message" cols="40" rows="4"></textarea><br />
<input type="submit" value="Clear Box" />
<span class="spacer"></span>
<input type="submit" value="Send Mail" />
</fieldset>
</form>
Click here to see what it looks like
I hope that's given you an insight into centering various blocks with the different browsers. Eventually, there will be standardisation but it's a slow process.
