Question

所以我试图在首页上创建一个widgetized are，我正在使用以下代码：

<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

960网格系统的工作方式，默认情况下，所有内容都左右对齐。这是因为float: left声明（以及从右到左国家的float: right）。要使小部件居中，您需要使它们成为grid_8，或使容器本身更窄以适应。

如果您传递了小部件的数量，并且它们都是响应式设计的，那么您可以执行以下操作：

'before_widget' => '<div id="%1$s" class="fp_widget roundedCorners %2$s grid_'. (24 / $widget_count) .'">',

编辑：

要将三个小部件右移一个小部件的宽度的一半（将它们居中），将类push_3添加到第一个小部件。这将在元素的左侧添加240px填充，它们将显示为居中。

Answer 2

它们并不意味着在第一个位置居中 - 浮动属性从左到右排列元素，填充整个容器的宽度（从左到右），直到它超过容器的宽度，并继续在下一行。因此，所有元素都将向左冲洗而不是居中。

简而言之，除非在父元素上设置display: inline-block（并删除浮点数），然后在父元素上设置text-align: center，否则不能将浮动元素居中。要缓解每个内联块元素之间存在空格的问题，请将父容器中的字体大小设置为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>

请参阅此处的小提琴 - http://jsfiddle.net/SzsuN/

容器中的中心网格元素（960网格）

2 个答案: