Javascript Jquery和CSS图像居中在选项卡中不起作用

我在jquery选项卡中的图像居中有问题。我从codepen.io创建了这个。如果你点击我的演示页面，你会看到1.Tab，2.Tab和3.Tab，还有1.Tab处于活动状态。1.选项卡图像居中工作，但如果单击2.选项卡和3.选项卡，则会看到图像居中不工作。我需要做什么？有人能帮我吗

我将此css代码用于img：

.img {
    float:left;
    width:310px;
    height:180px;
    overflow:hidden;
    }       
.img img {
 width:100%; 
  -webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
  -webkit-backface-visibility: hidden;
}
.img:hover img {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

---

不：我认为这不是css问题。

我看到您有一个用于居中的脚本，但问题是，它只为活动的一个获取正确的值，而为其他的一个获取正确的值。这会打乱左值和顶值的计算。所以这更像是一个加载问题…

问题是

tabify

插件隐藏了所有非活动选项卡的列表元素（包括图像）。因此，当您测量图像以计算正确位置时，图像尺寸为

（0,0）

解决方法是等待所有图像加载完毕，然后应用

tabify

插件

这就是我的意思：

$(document).ready( function() {

  var $imgs = $('.img img'),
      count = $imgs.length,
      counter = 0;

  $imgs
    .imgCentering({'forceSmart':true})
    .load(function() {
      counter++;
      if(counter === count) {
        $('#magtabs_').tabify(); 
      }

    })

})

最好使用已在

imgCentering

函数中定义的事件处理程序。这个代码片段可以工作，但它只是一个如何修复它的示例

---

这是一个工作问题

这是一个CSS问题。你可以直接在那些

标签（比如

left:155px

）上使用样式，这些标签可以将图像移离它应该位于的位置。是的，你是对的。我尝试了

live（）

和

delegate（）

-我正在测试它们。如果我单击2.Tab或3.Tab，选项卡链接就会消失。感谢您的精彩回复。