画像を中央の小さなdivに配置する

Question

width:100pxとheight:100pxのdivがあります。 その中に高さが常に100pxに固定されています。

イメージを水平に中央にしたいと思います。

はここで3例があります。

1. 画像の幅がdiv要素の幅と同じで、問題なく
2. 画像の幅がdiv要素の幅よりも小さいですが、私はここにmargin: auto
3. 画像の幅がよりある使用することができますdivの幅

divの内側に画像の中央部分が表示されます。

手段、画像の幅が120pxで、div要素の幅が100pxとoverflow:hidden であるように私は（そう、left: 10pxや画像のright: 10pxのdivの下に隠されている）

第110 PXに画像の10番目のピクセルが見えるようにしたい場合これはCSSプロパティによって可能ですか？ （私がロードされた画像の幅を知らない！そう、私はそれがダイナミックになりたい。 はまた、幅とmargin-left: -ve値のbla BLAを与えるの余分な量を見つけるためにはJavaScript側の計算を避けたい...）

また、divの画像をbackground-imageとすることはできません！

Answer 1

を参照してください：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; 
}