How to center several divs within a parent div?

Question

I have 3 divs contained within a parent div (class="row services").

How can I make it so that the three col s12 l3 divs are collectively centered within this parent div?

I've tried using display:block and text-align:center but that doesn't seem to have an effect.

HTML:

<div class="row services">

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Tulsa</p> <p>Tulsa, OK</p></h5>
        <p>9902 S. Memorial Dr.</p>
        <p>Tulsa, OK 74133</p>
        <p>866-612-0040</p>
        <a href="http://www.nelsonmazdaok.com/mazda-dealer-tulsa-ok/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdaok.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Hickory Hollow</p> <p>Antioch, TN</p></h5>
        <p>5300 Mount View Road</p>
        <p>Antioch, TN 37013</p>
        <p>877-708-4449</p>
        <a href="http://www.nelsonmazdahh.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdahh.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

    <div class="col s12 l3">
        <div class="divider"></div>
        <h5><p>Nelson Mazda Cool Springs</p> <p>Franklin, TN</p></h5>
        <p>7104 S Springs Drive</p>
        <p>Franklin, TN 37067</p>
        <p>877-708-4456</p>
        <a href="http://www.nelsonmazdacs.com/nelson-difference/car-dealership-near.html" class="btn waves-effect waves-dark white black-text">Get Directions</a>
        <p>
        <a href="http://www.nelsonmazdacs.com/" class="btn waves-effect waves-dark white black-text">Visit Website</a>
    </div>

</div>

CSS:

You want to center vertically, horizontally or both? – Michael Benjamin Jan 26 '16 at 01:12 — Michael Benjamin, Jan 26 '16 at 01:12

score 2 · Answer 1 · answered Jan 25 '16 at 23:53

2

Try this:

.col s12 l3{
  margin: 0 auto;
}

Or if you want them in a row:

.col s12 l3 {
 display: inline-block;
}

I hope that's what you are looking for!

answered Jan 25 '16 at 23:53

Michael Benjamin · Accepted Answer · 2017-06-04T13:02:36.320

2

Centering is easy with CSS Flexbox.

Here's all you need:

.row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

DEMO

More flexbox centering options: https://stackoverflow.com/a/33049198/3597276

edited Jun 04 '17 at 13:02

answered Jan 26 '16 at 01:14

Michael Benjamin

346,931
104
581
701

1

I've been looking at answers here for hours! Others always use either `display:block;` or `text-align: center;`, This is the only thing working for me. – Wanjia Jun 03 '17 at 22:26

How to center several divs within a parent div?

2 Answers2