居中子元素，相应调整父元素

Posted 2023-05-08

【中文标题】居中子元素，相应调整父元素

【英文标题】：center child element, adjust parent accordingly

【发布时间】：2011-12-16 17:27:13

【问题描述】：

我有一个本质上是图像滑块的东西。我有一张图片列表：

 <div class="container">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/ class="middle">
      <img src=""/>
      <img src=""/>
      <img src=""/>
      <img src=""/>
 </div>

左 对了

目标是：当用户点击右或左时，我会将第一张或最后一张图片移动到字符串的另一端，将 class="middle" 移动到下一张图片（取决于按下哪个按钮)，然后设置动画以使 .middle 移回屏幕中心。问题是，我不知道是否可以（使用 jquery）将子元素居中，然后相应地调整所有其他子元素和父元素。想法？谢谢！

【参考方案1】：

试试这样的：

var $imgmiddle = $('img.middle');
var imgwidth = $imgmiddle.width();
var docwidth = $(document).width();
var newleft = docwidth/2 - imgwidth/2;
var imgleft = $imgmiddle.position().left;  // position inside container
$('div.container').offset(left: (newleft-imgleft));