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

Question

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

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

请帮忙谢谢

Answer 1

将所有列包装在具有设置宽度属性的 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/