居中一张图片

Question

我想让一个带有溢出隐藏的div中心化一张图片，就像一个框架，无论图片大小如何都居中。

<div class="holder">
   <div id="frame">
      <img src="http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg" class="centerme"/>
   </div>
</div>​

请看图片获取更多信息： 标准状态是永远使用overflow:hidden;，但需要使其始终居中，即使是比框架大三倍的图片。

*这里是JSfiddle http://jsfiddle.net/UL3qp/4/ *编辑
最后需要循环此事件。

- Simon Dragsbæk

---

我尝试了所有可能的方法，包括绝对值和其他的，但都没有解决问题。我已经没有任何想法了，所以才来问。这是在foreach中使用的，因此后端将处理超过150个项目。目前我只有标准的CSS，等一秒钟，然后我会制作一个JSFiddle。 - Simon Dragsbæk

一个简单的 text-align: center; 就可以解决问题：http://jsbin.com/ufozol/1/ - balexandre

我知道如何居中一张图片，但我正在寻找一种在框架内居中它的方法，请查看jsfiddle。 - Simon Dragsbæk

Answer 1

使用 jQuery 居中图片 很简单 - 通过设置正数或负数的margin-left属性：

$(document).ready(function(){
    var fwidth = $('#frame').width();
    var iwidth = $('#frame img').width();
    $('#frame img').css('margin-left', Math.floor((fwidth-iwidth)/2));
});

仅使用纯CSS，可以通过背景图像CSS属性来完成，而无需使用img标签。

- Stano

---

顺便问一下，如果我想用多张图片进行这个数学运算，我需要做什么？ - Simon Dragsbæk

那太好了，它很有用。:) 在这里添加了一个循环，以单独居中所有的图像：http://jsfiddle.net/UL3qp/34/ - Stano

它是一个包围着图片的框架，然后框架溢出了。 - Simon Dragsbæk

好的，这里有两个变体：http://jsfiddle.net/KSnjU/6/ 或 http://jsfiddle.net/KSnjU/7/。 - Stano

Answer 2

http://jsfiddle.net/HCabZ/2/ 试试这个垂直居中、左右居中的方法

- Chandrakant

---

如果您缩小框架的大小，它不会覆盖图片的大小。 - Simon Dragsbæk

我需要一个特定的帧大小，且该帧为溢出隐藏。在此之内，我需要图像的中心与帧的中心对齐。 - Simon Dragsbæk

Answer 3

添加样式：

#frame{padding:15px; text-align:center}
#frame img{max-width:100%}

请查看这个 JSFiddle http://jsfiddle.net/HCabZ/

- Sowmya

---

你的框架应该在图片下面而不是像问题中那样在上面。 - lvil

这也只是将图像居中。 - Simon Dragsbæk