making the contents of div row centered in bootstrap

Question

I have a problem in making my div row centered, i have 3 posts from wordpress which is equivalent to 3 columns inside the row, but it didn't centered after i add many css attributes to let it center. I am also using wordpress.

Here is my code :

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

Here is my CSS:

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

what about `text-align: center` inside center-block selector? — may, Sep 21 '16 at 03:48
`display` does not have a `center` value. I believe you are looking for `display: block`. — Obsidian Age, Sep 21 '16 at 03:48
@JcJohn Check [This](http://stackoverflow.com/questions/39347643/is-it-possible-to-make-col-md-3-closer-or-center-to-each-other/39348067#39348067) Question, I hope it will help you. — Mohammad Usman, Sep 21 '16 at 05:35

score 1 · Accepted Answer · answered Sep 21 '16 at 05:46

1

Try this:

Check demo HERE

CSS:

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

I hope it helps

answered Sep 21 '16 at 05:46

Jyoti Pathania

4,944
1
17
29

nice answer.. but is it compatible with all browser? or in latest browser only? – Haresh Vidja Sep 21 '16 at 05:56
Flexbox is very well supported, at 95.89% global support. If you disregard IE 10 and below, which Microsoft says you now can, this number is even higher. – Jyoti Pathania Sep 21 '16 at 06:29
@Jyoti Pathania very nice answer ma'am, Thank you very much. – Jc John Sep 21 '16 at 07:12

making the contents of div row centered in bootstrap

1 Answers1

Linked