centering a div within a div

Question

I realize this has been asked a lot on SO, but after trying solutions from a bunch of different entries, I just can't seem to get it to work on mine. The answer is probably something easy i'm overlooking. Im just trying to get these 3 cells to be centered in the fixed container width of 1024px. Please help o' stackoverlords!

http://jsfiddle.net/uvb1u8y1/15/

#container {
width:1024px;
position:absolute;
background-color: #7f82a3;
}
#topgrid {
margin: 0 auto;
}
.toptile {
position:relative;
display: block;
float:left;
margin-left:10px;
margin-top:10px;
}
.topslider {
margin: 0px auto;
}
.contenthover {
padding: 15px 20px 0px 20px;
}
.contenthover {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size:12px;
}
.contenthover h4 {
font-size:20px;
font-weight:normal;
}
.contenthover h4, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
 .contenthover a {
font-family:'Droid Sans', sans-serif;
font-weight:700;
}
.contenthover a.mybutton {
margin: 20px 0 0 40px;
font-size:21px;
padding: 10px 15px;
color: #fff;
background: -webkit-linear-gradient(#5bc5de, #0b75b9);
background: -o-linear-gradient(#5bc5de, #0b75b9);
background: -moz-linear-gradient(#5bc5de, #0b75b9);
background: linear-gradient(#5bc5de, #0b75b9);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-style: solid;
border-color: #007ac9;
}
.contenthover a.mybutton:hover {
background: #005588;
}

<div id="container">
<div id="topgrid">
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

 <h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

 <h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
    <div class="toptile">
        <div class="topslider">
            <img class="topslidercell" src="http://placehold.it/300x200" width="300" height="200" />
            <div class="contenthover">

<h4>lorem Ipsum</h4>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac     turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.</p>
                <br /> <a href="#" class="mybutton">Click to Install</a>

            </div>
        </div>
    </div>
</div>
</div>


$('.topslidercell').contenthover({
effect: 'slide',
slide_speed: 300,
overlay_background: '#000',
overlay_opacity: 0.8
});

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — David says Reinstate Monica, Dec 19 '14 at 17:48
thanks for the response, thats one of the entries i tried working from, but couldnt get the result i needed.. philtune below got what i was looking for. thanks! — scott.schaffer, Dec 19 '14 at 17:51

score 4 · Accepted Answer · answered Dec 19 '14 at 17:48

4

Add:

#container { text-align: center; }

and

#topgrid { display: inline-block; }

What it does:

Whenever using floats, all your content will float to that side. Making #topgrid inline-block makes it... well... a block element that acts like inline, meaning it will be affected by a parent text-align: center;. And it will be only as wide as the descendant content needs it to be.

answered Dec 19 '14 at 17:48

Phil Tune

3,154
3
24
46

thanks philtune! i knew it would be something simple i was overlooking! thanks for the additional information. im still learning! – scott.schaffer Dec 19 '14 at 17:50
very welcome. Remember, if it works for you, go ahead and Accept the answer. Cheers! – Phil Tune Dec 19 '14 at 17:51

score -1 · Answer 2 · answered Dec 19 '14 at 18:04

-1

Here's a little tip on debugging divs: add a border around the problem div to see where it is on the page

border: 1px solid red

This is the result: http://jsfiddle.net/uvb1u8y1/16/

You can see that the div you are trying to center is taking up the entire width of the parent container, so it is centered. To fix this, you must specify the width of the div

You can see here that it is now centered: http://jsfiddle.net/uvb1u8y1/18/

Another helpful little tool available in most browsers is if you press f12 you can open a DOM explorer and through this you will be able to select elements on the page and highlight them so you can have a visual representation of the space they take up. You can even add, remove, or change attributes of these elements to quickly get an idea of how you might be able to fix a problem you are having.

answered Dec 19 '14 at 18:04

Joe Sager

787
4
9

who downvoted this...please tell me how this isn't useful information – Joe Sager Dec 19 '14 at 18:22
I upvoted, to balance it out, it's not a bad answer. Just looks a bit misleading on first glance. – Dec 19 '14 at 18:22
It looks like you're implying that `border` would fix the problem, on first glance. Because that's your only code block. – Dec 19 '14 at 18:31
Makes sense, but someone should still read the whole post before downvoting it. But i will remember that for future posts. I only added the snippet because it's required if you want to post a link to fiddle – Joe Sager Dec 19 '14 at 18:36

centering a div within a div

2 Answers2

What it does: