Question

我意识到这已经在SO上被问了很多，但是在尝试了一系列不同条目的解决方案之后，我似乎无法让它在我的工作上。答案可能是我很容易忽视的事情。我只是试图让这3个单元格在1024px的固定容器宽度中居中。请帮忙o stackoverlords！

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

Answer 1

添加：

#container { text-align: center; }

和

#topgrid { display: inline-block; }

它的作用：

每当使用浮动时，您的所有内容都会浮动到那一侧。使#topgrid inline-block成为......嗯......一个像内联一样的块元素，意味着它会受到父text-align: center;的影响。它只会像后代内容那样宽泛。

Answer 2

这里有关于调试div的小提示：在问题div周围添加一个边框以查看它在页面上的位置

border: 1px solid red

结果如下：http://jsfiddle.net/uvb1u8y1/16/

您可以看到您尝试居中的div占据了父容器的整个宽度，因此它居中。要解决此问题，您必须指定div的宽度

您可以在此处看到它现在居中：http://jsfiddle.net/uvb1u8y1/18/

在大多数浏览器中可用的另一个有用的小工具是，如果你按f12就可以打开一个DOM浏览器，通过它你可以选择页面上的元素并突出显示它们，这样你就可以直观地看到它们所占用的空间。起来。您甚至可以添加，删除或更改这些元素的属性，以便快速了解如何解决您遇到的问题。

将div放在div中

2 个答案:

它的作用：