不能格框對齊到中心

Question

我開發這個網站：www.sfitnesscenter.com

我試圖讓4個箱滑塊下方被2水平排列的2到中心。我試過使用margin：auto，但沒有改變。

這裏的HTML

<section id="wrapsecond"> 
    <div class="container"> 
    <div class="services-wrap"> 
     <?php if(get_theme_mod('shortinfo_sb')) { ?> 
     <?php echo get_theme_mod('shortinfo_sb'); ?> 
     <?php } else { ?>      
     <?php echo '<h2>What We Do</h2> 
     <p>We are passionate about our clients results.</p>'; } ?> 
     <div class="space50"></div> 

<!-- Home Boxes Section --> 
     <div class="home_boxes"> 
     <?php 
     for($bx=1; $bx<5; $bx++) { 
      if(get_theme_mod('page-setting'.$bx)) { 
      $bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true)); 
     while($bxquery->have_posts()) : $bxquery->the_post(); 
         ?> 
     <div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>"> 
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?> 
      <h4><?php the_title(); ?></h4><?php echo fitnesslite_content(22); ?> 
      <span class="ReadMore"><?php _e('Read More','fitness-lite');?> </span> 
      </a> 
     </div> 
     <?php endwhile; }else{?> 

      <div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>"> 
      <a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_0<?php echo $bx; ?>.jpg"><h4><?php _e('Page Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span> 
</a></div>       

      <?php }}?> 
     </div> 
     <!-- Home Boxes Section --> 
     </div><!-- services-wrap--> 
    <div class="clear"></div> 
    </div><!-- container --> 
</section><div class="clear"></div> 

和這裏的CSS

/* = Services section css 
-------------------------------------------------------------- */ 
#wrapsecond{ background-color:#272727; color:#fff; padding-bottom:100px; } 
.services-wrap, #FrontBlogPost .BlogPosts{ visibility:hidden;} 

.one_third{ margin:0 5% 3.5% 0; float:left; padding:25px; border:2px solid #fff;} 
.one_third:hover{ border-color:#ff4e1c;} 
.one_third:hover .ReadMore{ background-color:#ff4e1c;} 

.one_third img{ width:100%;} 
.one_third h4{font:600 18px/22px 'Roboto',sans-serif; padding:20px 0; margin:0; text-transform:uppercase; color:#fff;} 
.one_third h4 span{ color:#ff4e1c; font-weight:300;} 

.one_third h4 span::after{content:" ________"; display:inline-block;} 


.one_third p{ margin-bottom:20px; color:#fff;} 
.last_column{clear:right; margin-right:0 !important; } 

@media (max-width: 992px) { 
    .one_third { min-width: 45% } 
} 

@media (min-width: 992px) { 
    .one_third { max-width: 40% } 
} 

#wrapsecond h2{ font-size:40px; color:#fff; font-weight:600; margin-bottom:0; text-transform:uppercase; } 
#wrapsecond h2 span{ color:#ff4e1c; font-weight:300; } 

NB： 實際上，佈局應該是這樣的 左上：有氧健身班， 右上：肚皮舞班， 左下：瑜伽班， 右下：尊巴班

它橫向和縱向平行，直到我的客戶有一天放置了內容。即使照片被刪除後也沒有任何變化。所以，我不認爲這是由這些照片的尺寸造成的

Answer 1

將display更改爲inline-block，並將margin稍微減少一點。並刪除float。 使用花車.one_third類更改爲以下

.one_third { 
    margin: 0 3% 3.5% 0; 
    padding: 25px; 
    display: inline-block; 
    border: 2px solid #fff; 
} 

避免。它是一個混亂的事情來處理。