Home/ Questions/Q 1049351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:36:08+00:00

How do I center my webpage? Something like this , notice the borders on

  • 0

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\user\Pictures\Style\SepiaWeb\button_demo5.png" 

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

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

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

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

alt="Button 1" /></a>
  <li><img src="C:\Users\user\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\user\Pictures\Style\SepiaWeb\button_demo5.png" alt="Button 1" /></a>
  <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png" alt="Button 1" /></a>
  <li><img src="C:\Users\user\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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0