html - 无法将百分比宽度框置于百分比宽度框内

Question

我有一个宽度为 96% 的流体容器。

我在这个容器内有一个盒子，它也有百分比宽度。

我无法让盒子在 wrapper 内水平居中。通常的 margin:0 auto; 不起作用 - 我猜是因为它有一个百分比宽度。

<div id="wrapper">
    <div class="box">
        <img class="scales"... />
    </div>
</div>

这是CSS:

#wrapper {
    width:98%;
}

.box {
    width:40%;
}

.scales {
    width:100%;
}

Answer 1

问题可能是您的图片看起来没有居中，因为它可能小于包含 div 的 40%。无论如何，margin:0 auto; 没有理由不工作。图片居中解决方案:

.box {
    width:40%;
    margin:0 auto;
    text-align: center;
}