Centering three divs inside a div

Question

I am trying to center three divs inside of another div. I cannot seem to get it to work. My site is responsive, maybe this has something to do with it? Here is the code and CSS I have so far, any help is much appreciated!

I am trying to have all three divs .hp-highlight centered within .home-highlights:

<div id="home-highlights" class="clearfix">

    <div class="heading">
        <h2><a href="http://kompufast.com/?page_id=1909" title="What We Do"><span>What We Do</span></a></h2>
    </div>
    <!-- /heading -->

    <div class="hp-highlight  ">
        <img src="http://kompufast.com/wp-content/uploads/2012/06/kompufast_sales1.jpg" title="Sales" class="hp-highlight-img" />
        <h3><a href="http://kompufast.com/?services=safe-computing" title="Sales" target="_self">Sales</a></h3>
        <p>KompuFAST+ is the right company to help you address your need for all kind of consumer technology products.</p>
    </div>
    <!-- /hp-highlight -->

    <div class="hp-highlight  ">
        <img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_order1.jpg" title="Order" class="hp-highlight-img" />
        <h3><a href="http://kompufast.com/?services=social-media" title="Order" target="_self">Order</a></h3>
        <p>KompuFAST-Order facilitates the ordering of products, without a fee for special order.</p>
    </div>
    <!-- /hp-highlight -->

    <div class="hp-highlight highlight-third ">
        <img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_fix1.jpg" title="Fix" class="hp-highlight-img" />
        <h3><a href="http://kompufast.com/?services=shared-hosting " title="Fix" target="_self">Fix</a></h3>
        <p>KompuFAST+ has a team of dedicated repair technicians ready to diagnose your computer for all sorts of problems.</p>
    </div>

Here is the CSS I have been trying:

.home-highlights {
    margin-right:auto;
    margin-left:auto;
    width: 100%;
}
.hp-highlight {
    width: 280px;
}

I just wrote an [**SO Answer**](http://stackoverflow.com/a/11588894/1195891) that address your goal. Also, check the section ***pick your flavor*** in my other answer [**HERE**](http://stackoverflow.com/a/11516162/1195891) for more ideas. Cheers! — arttronics, Jul 21 '12 at 02:14

score 1 · Accepted Answer · answered Jul 21 '12 at 02:45

Won't work in IE7 or lower, but here you go.

.hp-highlight {
   display: inline-block;
   width: 280px;
   vertical-align: top;
}

If you need IE7 and lower support, you'll have to use float.

.hp-highlight {
   width: 280px;
   float: left;
}

Centering of all 3 items after that point will either be by using text-align: center on .home-highlight or wrapping those 3 in another div and setting the left/right margins on it to auto.

score 0 · Answer 2 · answered Jul 21 '12 at 02:12

0

add margin:auto; to your .hp-highlight class

here is how your css should be

.hp-highlight {
    margin:auto;
    width: 280px;
}

see working here: http://jsfiddle.net/RhMZ7/1/

answered Jul 21 '12 at 02:12

Victor Ribeiro da Silva Eloy

4,051
3
25
33

I tried this and they still don't seem to be centering. I am trying to get them centered within the div all on one line. You can see the result here: http://kompufast.com/ on the "What We Do" section, just above the footer. – cbdesign Jul 21 '12 at 02:39

score 0 · Answer 3 · answered Jul 21 '12 at 14:43

0

This will work even in IE7; no floating necessary.

.home-highlights {font-size: 0; text-align: center;}
.hp-highlight {
    display: inline-block;
    *display: inline; 
    vertical-align: top; 
    width: 280px;
    zoom: 1;
}

answered Jul 21 '12 at 14:43

Jezen Thomas

13,619
6
53
91

Centering three divs inside a div

3 Answers3