Question

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

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

请帮助谢谢

Answer 1

将所有列包装在div中，该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/

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

3 个答案: