Question

我有以下div：

<div id="photos">
 <div id="photos_cycle">
   <img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/female_tennis_player.jpg') }}" />
   <img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_1.jpg') }}" />
   <img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_2.jpg') }}" />
   <img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_3.jpg') }}" />
 </div>
</div>

其中有一个元素photos_cycle包含不同的图片，所有图片都具有相同的ID，这就是问题所在。

我使用以下javascript循环图像：

$('#photos_cycle').cycle({
 fx: 'fade',
 timeout: 8000,                    
 speed: 0
});

它在8秒后循环图像，这里没有什么令人兴奋的。

现在我想根据它们的宽度来定位我的图像我确定了photos_cycle的宽度应该是多少，以便我可以将它放在中心位置：

setInterval(function () {
 $("#photos_cycle img").each(function() {
  imageWidth = this.clientWidth;                        
  if (imageWidth > 0) {
   $("#photos_cycle").css('width', imageWidth);                  
  });                                
}, 10);

唯一的问题是它适用于Firefox和Chrome，但不适用于IE ... 我在这里发现的最大问题是我在确定我正在检查的图像尺寸时遇到问题，因为它们都具有相同的ID。

我希望有人能帮助我。

可以在http://test.tc.heeten.nl/找到它的实例，查看右下方的块。

编辑：

我不想唯一地定义ID，因为后来我想使用一些PHP代码自动将图像添加到photos_cycle div。

这是我用于div的css：

#photos {
    background-color: #8ab7e2;
    width: 340px;
    height: 240px;
    position: relative;

    top: 60px;
    border-radius: 20px;
    -moz-border-radius: 20px;

    box-shadow: 0px 0px 1px 1px #000;
}

#photos_cycle { 
    height: 240px;
    margin: 0 auto;
    position: relative;
}

#photos_cycle img {
    display: block;

    height: 200px;

    margin-top: 18px;

    position: position:absolute;
    left:50%;

    border: 2px solid #000;

    border-radius: 5px;
    -moz-border-radius: 5px;
}

Answer 1

您的元素不应具有相同的ID。 ID必须是唯一的。

使用CSS实际上可以解决问题。只需使用text-align: center;样式将图像置于div中心。

#photos_cycle { text-align: center; }

Answer 2

这是通过jQuery的中心图像：

<style type="text/css">
    #your_image_id {
        position:absolute;
        left:50%;
        top:100px;
    }
</style>

<script>
    $(document).ready(function() {

        var width = $("#your_image_id").width();

        var margin = width/2;

        $("#your_image_id").css("margin-left","-"+margin);
    });
</script>

这样做，它从屏幕左侧产生50％的边距，并将图像向左移动，宽度为2像素，即图像的宽度。

Answer 3

有一个小型jQuery插件可以实现这种跨浏览器：

http://boxlight.github.com/bl-jquery-image-center

使用jQuery在div中水平居中具有不同宽度的图像

3 个答案: