不能格框對齊到中心

我開發這個網站：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：實際上，佈局應該是這樣的左上：有氧健身班，右上：肚皮舞班，左下：瑜伽班，右下：尊巴班

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

來源

2016-10-10 Bang Fady

「肚皮舞課堂」源照片的寬高比與其他不同。糾正這可能是解決此問題的直接方法。 –

嗯...是的，當我用與「有氧課程」相同的照片更改那個時，它恢復了正常。那麼，我該怎麼做才能在Wordpress中自動執行@NateWhittaker？我必須安裝某種插件嗎？ –

我不會感到驚訝，但我不知道一個適用的Wordpress插件離開了我的頭頂。不過，作爲PHP，您可能可以使用PHP的圖像函數（http://php.net/manual/en/ref.image.php）推出自己的圖像函數。 –

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

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

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

來源

2016-10-10 17:21:33

我已經把代碼放到了CSS編輯器中，但沒有任何變化:(你需要刪除當前的.one_third類並添加上面的代碼： –

@ fady.noor .. –

不能格框對齊到中心

回答

相關問題