0

所以我试图在首页上创建一个小部件，我为此使用以下代码：

<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;

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

4

2 回答 2

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到第一个小部件。这将在元素的左侧添加 240 像素的填充，并且它们将显示为居中。

于 2013-03-09T14:57:48.390 回答
1

它们并不意味着首先居中 - float 属性从左到右排列元素，填充整个容器的宽度（从左到右），直到它超过容器的宽度，然后继续下一个线。因此，所有元素都将向左刷新而不是居中。

简而言之，除非您在浮动元素display: inline-block上设置（并移除浮动），然后text-align: center在父元素上设置，否则您无法居中浮动元素。为了缓解每个 inline-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>

在这里看小提琴 - http://jsfiddle.net/SzsuN/

于 2013-03-09T15:50:02.297 回答