html - 在 div 内水平居中元素

Question

所以我需要创建以 3 或 4 个正方形为中心的布局。现在有许多不同的屏幕(我目前有 21 台飞利浦、macbook 13 和 ipad)并且在所有这些屏幕上的方 block 都不一样。

所以我需要它在任何屏幕上居中。这是我的一些代码:

一些CSS:

#main{
border: 1px solid red;
margin: auto;
}
#block{
display: inline-block;
padding: 110px;
border: 1px solid red;
margin: 10px 10px;
overflow:hidden;
}

一些 HTML:

<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div style="clear:both"></div>
</div>
</div>

我用一些额外的 div 尝试了不同的方法......

所以我需要这个方 block 在任何屏幕上自动居中

Answer 1

因为您只是使用inline-block，所以您可以将容器的文本居中。

此外，对非唯一元素使用类。

fiddle :http://jsfiddle.net/LWTNB/3/

更新的 HTML:

<div id="wrapper">
    <div id="header">
        header
    </div>
    <div id="main">
        <div class="block">main</div>
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div> 
        <div class="block">main</div>
    </div>
</div>

更新的 CSS:

#main{
    border:1px solid red;
    text-align:center; /* solution */
}

.block{
    display:inline-block;
    padding:110px;
    border:1px solid red;
    margin:10px 10px;
    overflow:hidden;
}