Question

我正试图将一个较宽的div放在一个较小的div内，然后将它居中。可以这样做吗？

我有这个：

HTML

<body>
<div id="full_container">
<div id="machine_mask">
<div id="machine_container">
<!---- SOME CONTENT HERE --->
</div>
</div>
<div class="machine_footer">
<img src="sprites/base_maquina.png" alt="panel de control" />
</div>
</div>
</body>

CSS

body {
    margin :0;
}
div#full_container {
    width: 100%;
    height: 100%;
    background: #805080;
}
div#machine_mask {
    margin-top: 30px;
    width: 100%;
    display: inline-block;
    height: 600px;
    background: #805080;
    position: relative;
    overflow: hidden;
}
div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

当窗口宽度超过1230像素时，它会居中，但我真的需要在窗口较小时居中...

有办法做到这一点吗？（我在考虑使用jQuery并重新定位它，但我真的更喜欢在css中这样做）

非常感谢！

Answer 1

你可以使用绝对定位黑客。

div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: absolute;
    left: 50%;
    margin-left: -615px; //half of 1230px
    overflow: hidden;
}

将较宽的div放在较薄的掩模div中

1 个答案: