센터 격자 요소

Question

그래서 내가 FrontPage를에, 나는 그것에 대해 다음 코드를 사용하고됩니다에서는 widgetized을 만들려고 해요 :

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

자체가이 코드를 가지고 위젯을 : 내가 그 지역에서 4 위젯을 넣으면

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

모든 미세한 표시 정중하게, 그러나, 그들은 중앙하지 않습니다 만 3 위젯은 ..

나는 이미와 별도의 사업부를 추가하는 시도가있을 때 아래에 CSS가 추가되었습니다. 그러나 doens't는 다량 중 하나를하는 것을 보인다.

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

누구나 내가 뭘 잘못하고있어?

Answer 1

float 속성은 왼쪽에서 오른쪽으로 요소를 정렬하고 컨테이너의 너비를 초과 할 때까지 전체 컨테이너의 너비를 채 웁니다 (왼쪽에서 오른쪽으로). 다음 줄에 계속됩니다. 따라서 모든 요소는 왼쪽으로 플러시되고 가운데에 플러시되지 않습니다.

간단히 말하자면, 부동 요소를 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) .'">', 

편집 :이 같은 것을 할 수있는,

당신은 위젯의 수에 전달하면, 그들은 각각 응답하여 설계 맞아요으로

세 개의 위젯을 이동하는 방법을 반 하나의 위젯의 폭 (가운데에 위치)은 push_3 클래스를 첫 번째 위젯에 추가하십시오. 그러면 요소 왼쪽에 240 픽셀의 여백이 추가되고 가운데에 나타납니다.