将图像在较小的div内居中对齐
将图像在较小的div内居中对齐
提问于 2011-11-16 18:01:24
我有一个包含width:100px和height:100px的div (比方说)，里面只有一个图像，它的高度总是固定为100px。
我想让图像水平居中。
这里有3种情况：
- 图像的宽度等于div的宽度，没有问题
- 图像的宽度小于div的宽度，我可以在这里使用
margin: auto - 图像的宽度大于div的宽度
我希望图像的中心部分在div中是可见的。
意思是，如果图像的宽度是120px，而div的宽度是100px和overflow:hidden，我希望图像的第10个px到110个px是可见的(所以，图像的left: 10px和right: 10px隐藏在div下面)
是否可以通过一些CSS属性来实现？(我不知道正在加载的图像的宽度！)所以我希望它是动态的。还希望避免javascript侧计算，以找到额外的宽度，并给出margin-left: -ve值bla bl.)
另外，我不能给图片作为background-image的div！
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-16 18:32:49
请参阅： http://jsfiddle.net/thirtydot/x62nV/ (和without overflow: hidden可轻松查看居中)
这将在所有浏览器中工作，可能IE6除外。
对于.imageContainer > span，margin-left派生自width，width是控制将支持的最大图像宽度的任意数字。如果需要，您可以将width: 10000px; margin-left: -4950px;设置为支持非常宽的图像。
HTML：
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>CSS:
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8149747
复制相关文章
相似问题