我有一个包含width:100px
和height:100px
的div (比方说),里面只有一个图像,它的高度总是固定为100px
。
我想让图像水平居中。
这里有3种情况:
margin: auto
我希望图像的中心部分在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!
发布于 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;
}
https://stackoverflow.com/questions/8149747
复制相似问题