使div行的內容集中在bootstrap

我在使div行居中時出現問題，我有3個帖子來自wordpress，這相當於行內的3列，但它沒有居中後，我添加了很多css屬性讓它居中。我也在使用wordpress。使div行的內容集中在bootstrap

這裏是我的代碼：

<div class="row center-block"> 
<?php while ($offerBlog->have_posts()) : $offerBlog->the_post(); ?> 
         <div class="col-md-4 "> 
         <img src="<?php the_field('offer_image') ?>"> 
         <br> 
         <br> 
         <h4><?php the_field('offer_title') ?></h4> 
         <?php the_field('offer_description') ?> 
         </div> 
        <?php endwhile; ?> 

</div>

這裏是我的CSS：

.col-md-4 { 
    width:15%; 
    margin:0 2.5%; 
    text-align: center 
} 
.center-block { 
    margin-left:auto; 
    margin-right:auto; 
    display:center; 
}

來源

2016-09-21 Jc John

怎麼樣'的text-align：中心塊選擇裏面center'？ – may

'display'沒有'center'值。我相信你正在尋找'display：block'。 –

任何答案先生？ –

試試這個：

檢查演示HERE

CSS：

.center-block { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
}

我希望它能幫助

來源

2016-09-21 05:46:27

不錯的答案..但它是否與所有瀏覽器兼容？或只在最新的瀏覽器？ –

Flexbox得到很好的支持，全球支持率爲95.89％。如果你不考慮微軟現在可以使用的IE 10及更低版本，這個數字甚至更高。 –

@Jyoti Pathania非常好的回答女士，非常感謝。 –

使div行的內容集中在bootstrap

回答

相關問題