如何居中对齐10列HTML页面？

Question

1) Hi, http://www.getustad.com/TableProject/ is a 10 columns page that I need to be in center of the page, If I change resolution of page [move to bigger screen ] , all columns shouldn't move to left.

2) How to make html view independent of screen resolutions ?

Please help Thanks

Answer 1

wrap all the columns in a div which has a set width property something like

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

If the table has the id "mytable", you would do this:

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

It doesn't work in older browsers, though.

Answer 3

Hey now you can change your html and css code as like this

Css Code

#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 Code

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

Live demo http://jsfiddle.net/TKMCc/