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 中