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

Question

1）嗨， http://www.getustad.com/TableProject/是我需要在页面中心的10列页面，如果我更改页面的分辨率[移到大屏幕]，则所有列都不应该向左移动。

2）如何使html视图独立于屏幕分辨率？

请帮忙谢谢

Answer 1

将所有列包装在具有set width属性的div中，例如

<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

如果表的ID为“ mytable”，则可以执行以下操作：

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

但是，它在较旧的浏览器中不起作用。

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/