将 div 显示为没有 100% 宽度的居中块答案

【问题标题】：Display div as centered blocks without 100% width将 div 显示为没有 100% 宽度的居中块
【发布时间】：2014-04-22 17:49:33
【问题描述】：

我知道这是一个超级基本的问题，但我无法找到解决方案。我有 2 个 div，我想将它们显示为块（一个在另一个下方），而没有 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 不适合我，因为我需要将块水平居中（因此在我的情况下不能应用浮动）。这是fiddle。提前致谢。

【问题讨论】：

我不明白你为什么在 CSS 中使用 clear:both，因为没有任何东西是浮动的。另外，你的 div 之间的简单 <br /> 不会做你想要的吗？
你是对的@j08691，clear:both 来自我引用的答案。作为首选，我想避免添加额外的 html（如 <br/>），而是使用 CSS 设置所有内容。
jsfiddle.net/b8LuQ/4 和
并没有真正居中^^
@ReeCube - 您的代码中有空格，这些空格已被考虑到居中。删除它，您会看到它居中。
@j08691 啊，你是对的，好吧，那么我认为这是一个很好的解决方案:)

【解决方案1】：

在不占用 100% width 的情况下将它们彼此居中并仍然使用 margin:auto; 使用：display:table;

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

【讨论】：

这种方法的唯一缺点是与旧版本的 IE 兼容。
我想你明白了，@GCyrillus！这就是我一直在寻找的。 @j08691 的注释也很好，但正如 compatibility page 中所述，建议的语法与 IE8 兼容，这是我的目标。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

您还可以通过添加 50% 的左偏移量来使 div 居中，然后在 div 的一半宽度上添加负边距。我不知道这对你的情况有多少适用，但这里有一个例子：

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

你可以在这里看到它的实际效果：http://jsfiddle.net/b8LuQ/7/

【讨论】：

【解决方案4】：

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

【讨论】：