Centering using a Style Sheet

Centering Blocks and Floated Blocks

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.

Centering Floated Boxes with Images inside

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

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.