css - 将 div 显示为没有 100% 宽度的居中 block

Question

我知道这是一个 super 基本的问题，但我找不到解决方案。我有 2 个 div，我想将它们显示为没有 100% 宽度的 block (一个在另一个下面)。这是我的代码。

HTML

<div id="container">
    <div class="test">one</div>
    <div class="test">two</div>
</div>

CSS

.test {
    display:inline-block;
    clear: both;
    border:1px solid;
}

#container {
    clear:both;
    text-align:center;
}

不幸的是这个answer不适合我，因为我需要水平居中 block (所以在我的情况下不能应用 float )。这是 fiddle .提前致谢。

Answer 1

让它们彼此居中而不占用 100% 宽度 并且仍然使用 margin:auto; 使用:display:table;

.test {
display:table;
margin:auto;
border:solid;/* to see it */
}