jQuery onResize图像定位问题

Question

我有以下HTML：

<div id="container">
    <div id="cont1">
        <img src="img/1.png" />
    </div>
    <div id="cont2">
        <img src="img/2.png" />
    </div>
    <div id="cont3">
        <img src="img/3.png" />
    </div>
    <div id="cont4">
        <img src="img/4.png" />
    </div>
    <div id="cont5">
        <img src="img/5.png" />
    </div>
    <div id="cont6">
        <img src="img/6.png" />
    </div>
    <div id="cont7">
        <img src="img/7.png" />
    </div>
</div>

我希望这样，调整窗口大小，图像1.png.7 And

• 有相同宽度的窗口(好，完成)；
• 保持在页面的中心(这里有问题)。

我使用的jQuery代码是：

$(window).resize(function () {
        var w=$(window).width();
        var w7=w*7;
        $('#container').width(w7);

        var pw=w;
        $('#container > div').width(pw);

        $('#container > div > div > img').width(w);
 });

相反，实际上正在发生的是图像(以及它们的容器cont1...cont7)向调整大小的方向移动。

我明显少了什么？

Answer 1

我找到你的麻烦了伙计！你只需要做一件事。在容器div中添加“文本对齐:中心；”