html - 容器中的中心网格元素(960 网格)

Question

所以我正在尝试在首页上创建一个小部件，为此我使用了以下代码:

<div id="widgets" class="container_24">
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('frontpage_widget')) : else : ?>  
        <h4>Widget Ready</h4>  
        <p>This frontpage_widget is widget ready! Add one in the admin panel.</p>  
    <?php endif; ?>
    </div>

小部件本身得到了这段代码:

register_sidebar(array(
        'name' => 'Frontpage Widget',
        'id'   => 'frontpage_widget',
        'description'   => 'Widget area for frontpage',
        'before_widget' => '<div id="%1$s" class="fp_widget roundedCorners %2$s grid_6">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2><hr />'
    ));

如果我在该区域放置 4 个小部件，一切都很好，显示得很好，但是，当只有 3 个小部件时，它们不会居中..

我已经尝试添加一个额外的 div 并添加了下面的 css，但这似乎也没什么用。

margin-left:auto;margin-right:auto;

有人知道我做错了什么吗？

Answer 1

它们本来就不是要居中的——float属性从左到右排列元素，填满整个容器的宽度(从左到右)直到超过容器的宽度，然后继续在下一行。因此所有元素都将向左对齐而不是居中。

简而言之，您不能将 float 元素居中，除非您在它们上设置 display: inline-block(并移除 float )，然后设置 text-align: center 在父元素上。为了缓解每个内联 block 元素之间存在空格的问题，请将父容器中的字体大小设置为 0，并在子容器中重新声明所需的字体大小:

.container {
    background-color: #eee;
    text-align: center;
    font-size: 0; /* To remove space between inline-block elements */
    width: 100%; /* or 960px, or any other value you desire */
}
.widget {
    background-color: #aaa;
    display: inline-block;
    width: 25%;
    font-size: 16px; /* Reset font size in widgets */
}

HTML:

<div class="container">
    <div class="widget">Widget 1</div>
    <div class="widget">Widget 2</div>
    <div class="widget">Widget 3</div>
</div>

在这里查看 fiddle - http://jsfiddle.net/SzsuN/