为什么内联块会破坏我的定位？

Question

我对CSS很新，而且我很难搞清楚这一点。这是我的主要内容：

.blocksContainer{
position: relative;
border: solid;
height: 150px;
margin: 0 auto;
}

这是孩子div：

#blocks{
border: solid;
height: 85px;
width: 85px;
margin: 0 auto;
margin-top: 32.5px;
text-align: center;
}

这是我的第一个HTML示例：

<div class="blocksContainer">
     <div id="blocks">Test</div>
    </div>

这是我的结果，效果很好：

blocksContainer类跨越页面，单个块将根据需要保持居中。但是，当我添加另一个块时，我得到了这个：

显然不理想。所以我尝试在块类上使用内联块规则并得到：

它弄乱了我的中心位置，无论我做什么，我都无法让这些块居中。我不想让blocksContainer类设置为一个宽度，因为这将用于许多不同的屏幕尺寸，除非我可以将该div居中，然后将每个块放在其中。

有什么想法吗？提前谢谢！

Answer 1

你必须移动text-align：center;从子容器到父容器。这反过来将使包含的内联块元素居中。

http://jsfiddle.net/wv8sT/

CSS

.blocksContainer {
    position: relative;
    border: solid;
    height: 150px;
    margin: 0 auto;
    text-align: center;
}
.blocks {
    border: solid;
    height: 85px;
    width: 85px;
    margin: 0 auto;
    margin-top: 32.5px;
    display: inline-block;
}