javascript - 在div中居中

我意识到在SO上已经提出了很多要求，但是在尝试了许多不同条目的解决方案之后，我似乎无法使它在我的系统上工作。答案可能是我容易忽略的事情。我只是想让这3个单元格在1024像素的固定容器宽度中居中。请帮忙。

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
});

最佳答案

加：

#container { text-align: center; }

和

#topgrid { display: inline-block; }

它能做什么：

每当使用浮动时，您所有的内容都会浮动到该侧。制作#topgrid inline-block使其...很好...一个类似于内联的块元素，这意味着它将受父text-align: center;的影响。并且它将仅取决于子代内容所需的宽度。