html - 如何将这个未知大小的容器居中？

Question

我有以下 CSS/标记

http://jsfiddle.net/3SNm8/

.res-tile-wrap {padding-bottom:25px;}
.res-tile
{
    border:solid 1px #CCC;
    width:36px; height:34px; margin: 25px 0 0 25px; float:left; position:relative;
}

<div class="res-tile-wrap">
    <div class="res-tile">1</div>
    <div class="res-tile">2</div>
    <div class="res-tile">...etc</div>
</div>

res-tile-wrap 将包含未知数量的 tile div。有没有一种方法可以使 res-tile-wrap 居中或给出它居中的外观，因为我不想给它一个特定的宽度，因为我希望每行的瓦片数量与屏幕一样多允许。

Answer 1

对于内部 div，您可以使用 display:inline-block 而不是 float:left 并且由于内部内容的行为类似于内联元素，您可以将其居中容器 res-tile-wrap with text-align:center :

res-tile-wrap {
    padding-bottom:25px;
    text-align:center;
}

.res-tile{
    border:solid 1px #CCC;
    width:36px; height:34px; margin: 25px 0 0 25px;
    display:inline-block;
}

Example with 4 inner divs
Example with 11 inner divs