Have tried floating and in-line but divs not centering

Question

When I view the following code I see three 25% width divs but they're all aligned left. I'm trying to center the three without setting static px sizes of the divs. The .icon-container div is rendering as width: 75% and height: 17px. Am I missing something simple?

    .greybox {
     width: 100%;
     background-color: #a99e93;
     padding: 0 5%;
     margin: 0 auto 1rem auto;
 }

    .icon-container {
  margin: 0 auto;
        text-align: center;
  }

    .feature-icon {
     width: 25%;
     height: 100%;
     display: inline-block;
     padding-top: 2em;
     padding-bottom: 2em;
 }

    .feature-icon img {
     margin: 0 auto;
    }

    .feature-icon p {
     font-size: 1.2rem;
     color: white;
  padding-top: .8em;
    }

    <div class="greybox">
            <div class="icon-container">
                <div class="feature-icon">
                    <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
                    <p>Commercial</p>
                </div>
                <div class="feature-icon">
                    <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
                    <p>Industrial</p>
                </div>
                <div class="feature-icon">
                    <img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
                    <p>More Information</p>
                </div>
           </div>
        </div>

Seems to work just fine to me (horizontally centered). [fiddle](http://jsfiddle.net/tive/4y9uf8wu/) I've added `box-sizing: border-box` on the `.grey-box` so your width is 100% incl. padding. — Tim Vermaelen, Jan 23 '15 at 16:15
You are right it does seem to work when the code isolated. I've not tried it by itself just in context. What styling applied to a container div would cause it not to work when inserted into a page? — ohpayk, Jan 25 '15 at 21:29

score 0 · Answer 1 · answered Jan 23 '15 at 16:12

Try making these changes:

.icon-container {
    margin: 0;
    text-align: center;
    width: 100%;
 }

.feature-icon {
    width: 25%;
    height: 100%;
    display: inline-block;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: left;
}

Edit: The text-align: left is only required if you dont want the text center aligned

score 0 · Answer 2 · answered Jan 23 '15 at 16:47

0

You can try this:

.icon-container {
display:table;
width:100%;
}
.feature-icon {
display:table-cell;
}

answered Jan 23 '15 at 16:47

kanishkv

23
6

What are the benefits and drawbacks of this approach? – Jason Aller Jan 23 '15 at 17:12
Benefits: browser will render these three divs like columns with equal widths. Drawbacks: unknown. – kanishkv Jan 24 '15 at 03:31
I looked at http://caniuse.com/#feat=css-table and http://www.onenaught.com/posts/201/use-css-displaytable-for-layout and http://stackoverflow.com/questions/6307934/is-there-a-disadvantage-of-using-displaytable-cellon-divs and didn't see mention of the drawbacks I was expecting. – Jason Aller Jan 24 '15 at 03:37

Have tried floating and in-line but divs not centering

2 Answers2