Question

如何将我的网页居中？

像this之类的东西，注意文本两边的边框？

<!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>

修改

尝试过它似乎不起作用，我做错了什么？文本居中但不是图像。

<!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>

Answer 1

您可以通过将所有网站内容包装在包装元素中来完成此操作。然后设置此wrap元素的宽度并使用以下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 */
}

HTML将如下所示：

<body>
    <div id="wrap">
        all your site's content
    </div>
</body>

Answer 2

尝试以下代码（基于您编辑的代码）。我已经纠正了一些你的html'语法'并编辑了ul.navbar{} css样式。 如果有任何错误或遗失任何错误，请与我们联系

<!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:#FFF;
          }

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

          ul.navbar
          {
            list-style-type:none;
            float: left;
            top:1em;
            left:1em;
            width:9em;
            margin:0;
            padding:0;
            margin-right: 15px;
          }

          h1
          {
            font-family:Arial;
          }

          ul.navbar
          li
          {
            background:#0f0f0f;
            padding:.4em;
          }

          ul.navbar
          a
          {
            text-decoration:none;
          }

          address
          {
            margin-top:1em;
            padding-top:1em;
          }

          a:link,a:visited
          {
            color:#0f0f0f;
          }
      </style>
  </head>
  <body>
    <div id="wrap">
      <!-- Site navigation menu -->
      <ul class="navbar">
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo5.png"
            alt="Button 1"
            />
          </a>
        </li>
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png"
            alt="Button 1"
            />
          </a>
        </li>
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png"
            alt="Button 1"
            />
          </a>
        </li>
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png"
            alt="Button 1"
            />
          </a>
        </li>
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png"
            alt="Button 1"
            />
          </a>
        </li>
        <li>
          <a>
            <img
            src="C:\Users\user\Pictures\Style\SepiaWeb\button_demo4.png"
            alt="Button 1"
            />
          </a>
        </li>
      </ul>

      <!-- Main content -->
      <p>para 1</p>        
      <p>para 2</p>
      <address>Date<br>Sepia </address>

  </div>
  </body>
</html>

如何将我的网页居中？

2 个答案: