jquery - 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.png：

• 具有相同宽度的窗口（OK，DONE）；
• 留在页面的中心（问题在这里）。

我正在使用的 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