如何在CSS中對齊網頁

我是我的新CSS ..我已經將我的psd文件轉換爲html/css ..現在我想將我的網頁移動到窗口的中心..我嘗試了一些代碼並且該代碼僅對齊文本的背景圖像「back.gif」保持在左邊..這裏是我的HTML和CSS代碼」如何在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

來源

2012-04-13 maham

無論你想要居中的元素 - 設置一個明確的寬度，然後設置左/右邊距爲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-13 21:41:09 Madbreaks

我把這個代碼,, – maham 2012-04-13 21:55:41

'body { \t background：url（../ back.gif）repeat-y center top; \t} #main { \t background：url（../ back.gif）repeat-y; \t width：995px; \t margin：0 auto; \t}'這把背景圖片移動到中心..但主要的div在左邊.. @Madbreaks – maham 2012-04-13 21:57:02

深吸一口氣。爲什麼要在兩個元素中放置背景圖像？把它放在身體的元素。如果'＃main'仍然在左邊，請嘗試添加'height：100％;寬度：100％;'到你的'身體'CSS。 – Madbreaks 2012-04-13 22:07:25

要居中的主體元素，我會用一些與此類似：

.body { 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2012-04-13 21:41:22

使用簡寫，'邊距：0自動;'0爲頂部和底部，自動爲左和右。 – Whymarrh 2012-04-13 21:42:48

@Whymarrh：不確定我明白你的觀點。是的，還有其他的方式來寫它。但是，您的快捷方式要求我也知道/設置頂部邊距。我沒有對頂部邊緣進行假設。 – 2012-04-13 21:44:40

@Jonathan ..我剛剛檢查了你的代碼..我的背景圖像仍然是左邊的 – maham 2012-04-13 21:44:57

如何在CSS中對齊網頁

回答

相關問題