3

我是 CSS 的新手。我已经将我的 psd 文件转换为 html/css 。现在我想将我的网页页面移动到窗口的中心。我尝试了一些代码，并且该代码仅对齐文本背景图像“ back.gif" 留在左边.. 这是我的 html 和 CSS 代码"

**HTML**

<body>
<div id="main">

      <div id="header">
     <div id="logo">
            <img src="logo.gif" />
         </div>
      </div>

     <div id="menu">
     <img src="images/menu_07.gif" />
           <div id="m">
             <ul>
               <li> <a href="index.php">Home</a></li>
               <li> <a href="pages.php">Pages</a></li>
               <li> <a href="donor.php">Donor</a></li>
               <li><a href="seeker.php">Seeker</a></li>
               <li><a href="hospitals.php">Hospitals</a></li>
               <li><a href="lifesaving.php">Life Saving Contacts</a></li>
               <li><a href="contactus.php">Feedback</a></li>
             </ul>
           </div>
     </div>

     <div id="content">
     <div id="center" align="center">
             <h3>WELCOME TO ADMIN AREA</h3>
             <p id="ajk">AJKBLOODBANK.COM</p>
         <?php
              echo "welcome!".$_SESSION['username'];
              echo "<br>";
              echo "<a href=logout.php>Logout</a>&nbsp;";
             ?>
         </div>
     </div>

     <div id="footer">
     </div>
</div>
</body>


**CSS**
body
{

    background:url(../back.gif) repeat-y;   
    padding-left:105px;
    height:900px;
    text-align: center;
    margin:auto;
    min-width: 760px;
}
div#main 
{
    width: 720px;
    margin: 0 auto;
    text-align: left;
}

#header
{
    width:787px;
    margin-top:10px;
}

#menu
{

    width:787px;    
    float:left;
    margin-top:20px;

}

#content
{
    background-color:#FFF;
    border:groove;
    width:790px;
    float:left;
    padding-top:30px;
    margin-top:30px;
}
#footer
{
        float:left;
        height:52px;
        width:790px;
}

请告诉我我在哪里做错了..

the diameseion of background image "backgif" = 995x1000
4

2 回答 2

6

无论您想要居中的哪个元素 - 设置一个明确的宽度，然后将左/右边距设置为auto

#main { width:995px; margin:0 auto; }

...这将使元素在其父元素中居中。如果您要居中#main，它将在页面上居中（假设您的body宽度为 100%）

编辑

尝试使您的背景图像应用于#main而不是body. background-position或者，使用或速记使背景图像居中：

body { background:url(../back.gif) repeat-y center top; }

干杯

于 2012-04-13T21:41:09.140 回答
4

为了使 body 元素居中，我会使用类似的东西：

.body {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
}
于 2012-04-13T21:41:22.257 回答