css - 为什么内联 block 会破坏我的定位？

Question

我是 CSS 的新手，我很难理解这一点。这是我的主要 div:

.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 类跨越页面，并且单个 block 将按照我的意愿始终居中。但是，当我添加另一个 block 时，我得到了这个:

显然不理想。所以我尝试在 blocks 类上使用 inline-block 规则并得到这个:

它弄乱了我的中心定位，无论我做什么我都无法让方 block 居中。我不想让 blocksContainer 类设置宽度，因为这将在许多不同的屏幕尺寸上使用，除非我可以将那个 div 居中，然后每个 block 都以它为中心。

有什么想法吗？提前致谢!

Answer 1

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

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;
}