对齐图像中心内部较小的div

我有一个div与width:100px和height:100px（说）里面，只有一个图像，其高度始终固定为100px。对齐图像中心内部较小的div

我想使图像水平居中。

在这里有3种情况：

图像的宽度等于div的宽度，没有问题
图像的宽度小于div的宽度，我可以用margin: auto这里
图像的宽度大于div的宽度

我希望图像的中心部分在div内可见。

手段，如果图像的宽度是120px和div的宽度是100px和overflow:hidden 我想图像的第10个像素到110像素可见（这样，left: 10px和图像的right: 10px在div下被隐藏）

这是可能通过一些CSS属性？ （我不知道正在加载的图像的宽度！所以我希望它是动态的。也想避免javascript边计算找到额外的宽度和给予margin-left: -ve值bla bla ..）

此外，我不能给图像background-image为div！

来源

2011-11-16 SuryaPavan

参见：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; 
}

来源

2011-11-16 10:32:48 thirtydot

感谢@thirtydot！通过添加以下2个属性，我能够实现垂直对齐中心也用于小图像（当与div对比时） .imageContainer line-height：100px; } .imageContainer> span> img vertical-align：middle; } :-) – SuryaPavan

很好的回答，jsfiddle的好用法：D –

真棒回答！ – tanathos

对齐图像中心内部较小的div

回答

相关问题