html - 无法将 div 框对齐到中心

Question

我正在开发这个网站:www.sfitnesscenter.com

我正在尝试使 slider 下方的 4 个框与中心水平对齐 2 x 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; }

注意:实际上，布局应该是这样的左上:有氧运动课，右上:肚皮舞课，左下: Yaga 课，右下:尊巴课

它是水平和垂直平行的，直到我的客户前几天放了内容。即使删除照片后也没有任何变化。所以，我不认为这是由那些照片的尺寸引起的

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

避免使用 float 。处理起来很麻烦。