使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

回答

相关问题