中心網格元素

所以我想是在FrontPage中，我使用下面的代碼來創建一個部件化：中心網格元素

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

有人知道我在做什麼錯嗎？

來源

2013-03-09 Yoeri Rousseaux

它們並不意味着集中在第一個位置 - 浮動屬性從左到右排列元素，填充整個容器的寬度（從左到右），直到它超過容器的寬度，並且繼續下一行。因此，所有的元素都將被刷新到左側而不是居中。

總之，除非您在其上設置了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/

來源

2013-03-09 15:50:02 Terry

這工作很好！不需要用這種方式來控制小部件的數量 – 2013-03-09 17:41:05

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的填充，並且它們將顯示居中。

來源

2013-03-09 14:57:48

THX，是一個不錯的選擇！ – 2013-03-09 17:41:50

中心網格元素

回答

相關問題