центра сетки элементы в контейнере (+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

Они не предназначены для центрирования на первом месте - свойство поплавка устраивает элементы слева направо, заполняя ширину всего контейнера (слева направо) до тех пор, пока он не будет превышать ширину контейнера, а продолжается на следующей строке. Поэтому все элементы будут размыты влево и не центрированы.

Короче говоря, вы не можете центрировать элементы с плавающей точкой, если вы не установите на них 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/

Answer 2

Как работает сетка 960, все по умолчанию выравнивается влево или вправо. Это связано с оператором float: left (и float: right в странах с правом налево). Чтобы центрировать виджеты, вам нужно либо сделать их grid_8, либо сделать контейнер уже более узким для размещения.

Если передать количество виджетов, и они каждый из которых предназначен ответно, вы могли бы сделать что-то вроде этого:

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

EDIT:

Для переключения трех виджетов прямо на половину ширину одного виджета (который будет центрировать их), добавьте класс push_3 в первый виджет. Это добавит 240px отступ слева от элемента, и они будут центрироваться.