html - 居中容器并使其宽度等于其浮动内容

Question

这应该是一个基本的 CSS 问题，但众所周知，有时它可能是一种棘手的语言。

<div id="main">    
    <div id="container">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
    </div>
</div>

#main {clear: both; margin: 20px auto; max-width: 100%; width: 1000px;}
#container {clear: both; margin: 0 auto; max-width: 832px;}
.item {width: 208px; float: left;}

默认情况下，.items连续 4 个。当我将浏览器窗口的大小调整为小于 832px 宽时，会.items向下跳以连续容纳 3 个。

如何将 3 个项目居中#container或使其#container宽度等于其浮动内容的宽度并将#container居中#main？

Answer 1

我相信这或多或少是你想要的：

http://jsfiddle.net/L3JVe/17/

这是一个简单的修复。我设置了你.item的 sdisplay:inline-block;和你的#containerto text-align:center;。

您的新 CSS 将如下所示：

#main {
    clear: both;
    margin: 20px auto;
    max-width: 100%;
    width: 1000px;
}

#container {
    clear: both;
    margin: 0 auto;
    max-width: 832px;
    text-align:center; /*New*/
}

.item {
    width: 208px; /*May need to adjust*/
    display:inline-block; /*New*/
}​​​​​​​

此外，您需要删除 HTML 中项目之间的所有空格，以避免在呈现的项目之间出现空格。（谢谢，@thirtydot！）