Question

这就是我所拥有的：

<style>
div.box {
    width:400px;
    height:200px;
    float:left;
}
</style>

<div style="width:100%; height:200px; overflow:hidden;">

    <div style="width:2000px; height:200px;">
        <div class="box" style="background:red;"></div>
        <div class="box" style="background:blue;"></div>
        <div class="box" style="background:yellow;"></div>
        <div class="box" style="background:orange;"></div>
        <div class="box" style="background:black;"></div>
    </div>

</div>

当页面调整大小时，我希望2000px div的内容保持居中，因此黄色div始终位于屏幕中间。

是否可以仅使用css执行此操作？

Answer 1

<div style="width:100%; height:200px; overflow:hidden;">
    <div style="width:2000px; height:200px;position: relative; left: 50%; margin-left: -1000px">
        <div style="width:400px; height:200px; float:left; background:red;"></div>
        <div style="width:400px; height:200px; float:left; background:blue;"></div>
        <div style="width:400px; height:200px; float:left; background:yellow;"></div>
        <div style="width:400px; height:200px; float:left; background:orange;"></div>
        <div style="width:400px; height:200px; float:left; background:black;"></div>
    </div>
</div>

Here's the link

Answer 2

将margin: auto;放入您的2000px div

中心div为100％宽度的div

2 个答案: