如何居中一個簡單的HTML頁面？

alt text http://img696.imageshack.us/img696/6073/browserr.jpg

我想使頁面居中顯示和緊湊：

alt text http://img514.imageshack.us/img514/9879/23708848.jpg

我做可以在第一張照片中看到邊框以顯示結構。

下面是HTML源代碼：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div id="body"> 
<div id="masthead"> 
<table border="1" cellpadding="0" cellspacing="0" width="20%"> 
    <tbody> 
    <tr> 
     <td><b>Shipment #</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    <tr> 
     <td><b>Invoice #</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    <tr> 
     <td><b>Customer PO</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    </tbody> 
</table> 
<br/> 
<h1 align="center">PACKING LIST</h1> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="50%"><b><u>Package Consists the Following Items:</u><br/><br/></b></td> 
    </tr> 
</tbody> 
</table> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="7%">1.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    <tr> 
     <td width="7%">2.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    <tr> 
     <td width="7%">3.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    </tbody> 
</table> 
<br/><br/> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="30%"><b><u>Distributor</u></b></td> 
     <td><b><u>Printed on</u></b></td> 
    </tr> 
    <tr> 
     <td><b><font color="#333399">SAMPLE COMPANY</font></b></td> 
     <td>5/3/2010</td> 
    </tr> 
</tbody> 
</table> 
</body> 
</html>

來源

2010-08-07 Beginner_Pal

把你的內容在被設置爲特定寬度的「容器」 DIV，並將它們設置在css中左右邊距爲「自動」（邊距：0px自動0px自動）（邊距值參考頂部，右邊，底部和左邊的順序，在CSS中填充相同）。

<html> 
<head> 
    <title></title> 
</head> 

<style type="text/css"> 
.container { 
    width: 760px; 
    margin: 0px auto 0px auto; 
} 
</style> 

<body> 
<div id="body"> 

<div class="container"> 

<div id="masthead"> 
<table border="1" cellpadding="0" cellspacing="0" width="20%"> 
    <tbody> 
    <tr> 
     <td><b>Shipment #</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    <tr> 
     <td><b>Invoice #</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    <tr> 
     <td><b>Customer PO</b></td> 
     <td>ADD TEXT</td> 
    </tr> 
    </tbody> 
</table> 
<br/> 
<h1 align="center">PACKING LIST</h1> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="50%"><b><u>Package Consists the Following Items:</u><br/><br/></b></td> 
    </tr> 
</tbody> 
</table> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="7%">1.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    <tr> 
     <td width="7%">2.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    <tr> 
     <td width="7%">3.</td> 
     <td>Item Name</td> 
     <td>Show Qty.</td> 
    </tr> 
    </tbody> 
</table> 
<br/><br/> 
<table border="1" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
    <tr> 
     <td width="30%"><b><u>Distributor</u></b></td> 
     <td><b><u>Printed on</u></b></td> 
    </tr> 
    <tr> 
     <td><b><font color="#333399">SAMPLE COMPANY</font></b></td> 
     <td>5/3/2010</td> 
    </tr> 
</tbody> 
</table> 

</div> 

</body> 
</html>

來源

2010-08-07 19:09:50 tomvon

感謝.....解決 – 2010-08-07 21:34:41

的答案是真棒， +1，但我認爲我應該指出這一點; * margin：0px auto 0px auto; *是不必要的。只需使用：* margin：0 auto; *就足夠了。 :-) – 2011-03-04 06:33:32

試試這個CSS：

html, body{ 
    text-align:center; /* fix for ie7 */ 
} 

div#body{ 
    margin:0px auto; 
    width:800px; /* adjust width */ 
    text-align:left; 
}

來源

2010-08-07 10:29:30 Sarfraz

我會嘗試..... – 2010-08-07 12:30:45

從table標籤中移除width = 20％。這是醜陋的HTML。

按照其他答案中的建議使用CSS。

製作一個包含表格的DIV。在div需要

<div style="margin:0 auto;width:[size you want]px;">

<table ....>

</table>

</div>

來源

2013-02-27 23:28:04 BerggreenDK

如何居中一個簡單的HTML頁面？

回答

相關問題