显示div为居中块，没有100%的宽度

Question

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

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 1

在不取100% width的情况下，仍然使用margin:auto;使用:display:table;

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

Answer 2

您可以指定div的宽度，将display更改为block，并使用margin: 0 auto将它们居中

JSFiddle

Answer 3

您也可以通过添加50%左偏移量来居中div，然后负边距为div的一半宽度。我不知道这适用于您的情况，但这里有一个例子:

.test {
    position: relative;
    border:1px solid;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

您可以在这里看到它的作用:http://jsfiddle.net/b8LuQ/7/

Answer 4

display:inline-block;不允许第二行。因此，我删除了它，并为两个div都定义了宽度test一，二你可以调整它的大小margin:auto是居中对齐这是一个的例子