使div行的内容在bootstrap中居中

Question

我有一个问题，我的div行居中，我有3个帖子来自wordpress，相当于行内的3列，但它没有居中后我添加许多CSS属性让它居中。我也在使用wordpress。

这是我的代码：

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

Answer 1

试试这个：

检查演示HERE

CSS：

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

我希望它有所帮助