使 div 行的内容在引导程序中居中答案

【问题标题】：making the contents of div row centered in bootstrap使 div 行的内容在引导程序中居中
【发布时间】：2017-01-29 03:30:18
【问题描述】：

我在使我的 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;
}

【问题讨论】：

中心块选择器内的text-align: center 怎么样？
display 没有 center 值。我相信你正在寻找display: block。
先生有什么答案吗？
@JcJohn Check This 问题，希望对你有帮助。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

试试这个：

查看演示HERE

CSS：

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

希望对你有帮助

【讨论】：

不错的答案.. 但它与所有浏览器兼容吗？还是仅在最新的浏览器中？
Flexbox 得到了很好的支持，全球支持率为 95.89%。如果你不考虑 IE 10 及更低版本，微软说你现在可以，这个数字甚至更高。
@Jyoti Pathania 非常好的回答女士，非常感谢。