1

我正在尝试将一个宽 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;
}

当窗口宽于 1230px 时，它居中，但是当窗口较小时，我真的需要它居中......

有没有办法做到这一点？（我正在考虑使用 jQuery 并重新定位它，但我真的更喜欢在 css 中执行此操作）

非常感谢！

4

1 回答 1

0

您可以使用绝对定位技巧。

div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: absolute;
    left: 50%;
    margin-left: -615px; //half of 1230px
    overflow: hidden;
}
于 2013-07-25T23:38:36.307 回答