center grid elements in container (960 grid)

Question

So i'm trying to create a widgetized are on the frontpage, i'm using the following code for that:

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

the widgets itself got this code:

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 />'
    ));

If I put 4 widgets in that area all is fine, displayed nicely, however, when there are only 3 widgets they won't center..

I already tried adding an extra div with the css below added to it, but that doens't seem to do much either.

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

Anyone got an idea what i'm doing wrong?

Answer 1

They are not meant to be centered at the first place - the float property arranges elements from left to right, filling up the width of the entire container (left to right) until it exceeds the width of the container, and the continues on the next line. Therefore all elements will be flushed towards the left and not centered.

In short, you can't center floated elements unless you set display: inline-block on them (and remove the float), and then text-align: center on the parent element. To mitigate the issue where a whitespace is present between each inline-block elements, set the font size in the parent container to 0, and the redeclare the desired font-size in the children:

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

See fiddle here - http://jsfiddle.net/SzsuN/

Answer 2

The way 960 grid system works, everything is aligned left or right by default. This is because of the float: left statement (and float: right in right-to-left countries). To center the widgets, you either need to make them grid_8, or make the container itself narrower to accomodate.

If you pass in the number of widgets, and they're each designed responsively, you could do something like this:

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

EDIT:

To shift the three widgets right by half the width of one widget (which will center them), add the class push_3 to the first widget. This will add 240px padding to the left of the element, and they will appear centered.