如何居中對齊的10列HTML頁面？

Question

1）嗨，http://www.getustad.com/TableProject/是我需要在頁面中心的10列頁面，如果我改變頁面的分辨率[移動到更大的屏幕]，所有的列不應該移動到左邊。

2）如何使HTML視圖獨立於屏幕分辨率？

請幫助謝謝

Answer 1

如果表中有id爲「MYTABLE」一個div中的所有列，你可以這樣做：

table#mytable 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 50em; 
} 

但是，它在舊版瀏覽器中不起作用。

Answer 2

包裹在其中有一組width屬性類似

<div id="main_body"> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
</div> 

Set the css properties of main_body to whatever u want. ex: align:center. width:840px; etc 

Answer 3

嘿，現在你可以改變你的HTML和CSS代碼，這樣

CSS代碼

#main{ 
margin:0 auto; 
    border:solid 1px red; 
    text-align:center; 

} 

.box{ 
margin:2px; 
    background:rgba(0,0,0,0.2); 
    display:inline-block; 
    vertical-align: top; 
} 

HTML代碼

<div id="main"> 
    <div class="box"> 
    <img src=""> 
     <p>Oncenter</p> 
    </div> 


    <div class="box"> 
    <img src=""> 
     <p>Oncenter</p> 
    </div> 



    <div class="box"> 
    <img src=""> 
     <p>Oncenter</p> 
    </div> 


    <div class="box"> 
    <img src=""> 
     <p>Oncenter</p> 
    </div> 

</div> 

現場演示http://jsfiddle.net/TKMCc/