How do I center my webpage?

Something like this, notice the borders on both sides of the text?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Sepia!</title>

  <link rel="stylesheet" href="mystyle.css">
  <style type="text/css">


  body {
    padding-top: 14em;
    padding-left: 30em;
    text-align: center;
    font-family: Arial ;
    color: #414189;
    background-color: #0f0f0f}
 ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 1em;
    left: 10em;
    width: 9em }
 h1 {
    font-family: Arial }
 ul.navbar li {
    background: #0f0f0f;
    padding: 0.4em;
   }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: #0f0f0f}
  a:visited {
    color: #0f0f0f}
  address {
    margin-top: 1em;
    padding-top: 1em }


  </style>


</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo5.png" 

alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" 

alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" 

alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" 

alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" 

alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" 

alt="Button 1" /></a>
</ul>

<!-- Main content -->

<p>para 1

<p>para 2




<address>Date<br>
  Sepia </address>

</body>
</html>

EDIT:

Tried it and it doesn't seem to be working, what did I do wrong? The text is centered but not the images.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Sepia!</title>

  <link rel="stylesheet" href="mystyle.css">
  <style type="text/css">


  body {
    padding-top: 14em;
    padding-left: 20em;
    font-family: Arial ;
    color: #414189;
    background-color: white}

   wrap {
   width: 900px;             
   margin: 0 auto;           
   background-color: #0f0f0f}

 ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: Absolute;
    top: 1em;
    left: 1em;
    width: 9em }
 h1 {
    font-family: Arial }
 ul.navbar li {
    background: #0f0f0f;
    padding: 0.4em;
   }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: #0f0f0f}
  a:visited {
    color: #0f0f0f}
  address {
    margin-top: 1em;
    padding-top: 1em }


  </style>


</head>

<body>
<div id="wrap">
<!-- Site navigation menu -->
<ul class="navbar">
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo5.png" alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\Drew French\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
</ul>

<!-- Main content -->

<p>para 1

<p>para 2




<address>Date<br>
  Sepia </address>
</div>
</body>
</html>

Be sure to add a `text-align: center;` rule in the `body` selector.

Saladin Akara 2010-09-08 02:30:08

Having trouble see edit.

Anteater7171 2010-09-08 02:36:55

@Anteater The selector is `#wrap` not `wrap`. With `wrap` (no `#`), all you're doing is selecting all instances of a non-existent `wrap` tag

Yi Jiang 2010-09-08 02:38:37

@Saladin I don't think text-align: center is necessary on the body tag.

jessegavin 2010-09-08 02:38:58

@Saladin if OP needs to support IE5, then yes, they'll need `text-align: center` on the body. But if they're supporting IE5, they've got bigger problems than centered content ;)

Pat 2010-09-08 02:54:47

@jessgavin, Pat: Oh. I was under the impression it was needed - always done it myself. Well, that's one less line of code for each site I make now. Thanks for the heads up. :)

Saladin Akara 2010-09-08 03:17:04

ansaurus

tags:

views:

answers:

How do I center my webpage?

related questions