HTML: Replacement for <center>

Question

I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.

This is a portion of my HTML: (you can also see it in action in the page I created for this question : http://www.moviez.4pu.com/ErrorPageSO.aspx

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
 <span style="width:560px;padding-right:10px;text-align:left;float:left;">
 <h1>Oops... We're sorry.</h1>

 <h3>You've just encountered an unknown error. <br /></h3>
 This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
 We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
 <br />
 <h3>
 You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.  
 </h3>
 </span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>

I want to do 2 things:

1. Get Rid of the <center> tag while keeping the div in the center of the page.
2. Make sure the outer DIVs background color and border affect the inner spans.

UPDATE: Objective 1 is completed. Time for objective #2.

Answer 1

Use margin: 0 auto; on your enclosing <div>

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
  <span style="width:560px;padding-right:10px;text-align:left;">
  <h1>Oops... We're sorry.</h1>

  <h3>You've just encountered an unknown error. <br /></h3>
  This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
  We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
  <br />
  <h3>
  You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.           
  </h3>
  </span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>

See it in action.

Reference: CSS: centering things

Answer 2

Inline content is aligned with text-align, block content is aligned with margins (set to auto for the case of centring). See Centring Using CSS.

Answer 3

if you are trying to center the div on the page, I usually use this method for my main wrapping div to center the page.

making the left positioning at 50% and then margining back left half of the width of the div.

example below.

#mainspace {
    position:absolute;
    left:50%;
    margin-left:-450px;
    height:auto;
    width:900px;
    border:none;
    }

Answer 4

If you want to simply center the text, you this css style:

text-align:center;

However, if you are looking to center the element or div itself, there are quite some solutions for that, one being below:

.mydiv
{
  margin:0 auto;
}

Or even with something like this:

.mydiv
{
  width:300px; // the width can sometimes be ignored based on inherent size of element.
  margin-left:auto;
  margin-right:auto;
}

Or even with something like this:

.mydiv
{
  margin-left:50%;
  margin-right:50%;
}

So you see, there can be more possibilities.