tags:

views:

57

answers:

1

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>
+2  A: 

You can do this by wrapping all your site's content in a wrapping element. You then set the width of this wrap element and center it using the following CSS:

body {
   background-color: #ddd;   /* the colour on the edges of the screen */
}

#wrap {
   width: 700px;             /* Set wrapper's width */
   margin: 0 auto;           /* Center the wrapper in the window */
   background-color: #fff;   /* the colour of the wrapper */
}

The HTML will look like the following:

<body>
    <div id="wrap">
        all your site's content
    </div>
</body>
Pat
Be sure to add a `text-align: center;` rule in the `body` selector.
Saladin Akara
Having trouble see edit.
Anteater7171
@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
@Saladin I don't think text-align: center is necessary on the body tag.
jessegavin
@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
@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