Question

我有一个96％宽的液体容器。

我在这个容器里面有一个盒子，它的宽度也是百分比。

我无法让盒子在包装盒内水平居中。通常的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;
}

Answer 2

请尝试以下操作： DEMO

<强> CSS：

#wrapper {
    width:98%;
     background-color:#999;
}
.box {
    width:40%;
    margin:0 auto;
    display:block;
    background-color:#ccc;
}
.scales {
    width:100%;
}

无法在百分比宽度框内居中百分比宽度框

2 个答案: