Obraz w centrum CSS w obciętym div rodzicielskim

Question

Jak wycentrować img w tagu nadrzędnym div, który jest ustawiony na overflow: hidden. Chodzi o to, że chcę przyciąć obraz, ale klip po lewej/prawej stronie, aby pokazać środkową część obrazu.

<div class='wrapper'> 
    <img/> 
</div> 

Następnie style coś takiego:

.wrapper { 
    position: absolute; 
    /* position details here */ 
    overflow: hidden; 
} 
.wrapper img { 
    height: 100%; 
    margin-left: -??; //what here? 
} 

-50% byłaby szerokość rodzica, ale chcę szerokość samego img.

Obsługiwany przez Firefoksa CSS jest akceptowalny.

Answer 1

http://codepen.io/gcyrillus/pen/BdtEj

Zastosowanie text-align, line-height, vertical-align, a marża ujemna. img wirtualnie zredukowany do zera, sam się wyśrodkuje.

.wrapper { 
    width:300px; 
    text-align:center; 
    line-height:300px; 
    height:300px; 
    border:solid; 
    margin:2em auto; 
    overflow:visible; /* let's see what we slice off */ 
} 
img {margin:-100%;vertical-align:middle; 

    /* to show whats been cut off */ 
    position:relative; 
    z-index:-1; 
} 

uzyskać tylko w poziomie:

.wrapper { 
     width:300px; 
     text-align:center; 
     border:solid; 
     margin:2em auto; 
     overflow:hidden 
    } 
    img { 
     margin:0 -100%; 
     vertical-align:middle; 
    } 

Answer 2

Spróbuj dodać

display:block; 
margin:0px auto; 

do ".wrapper img"

Answer 3

Hi proszę sprawdzić example

jej rozwiązać problem

HTML

<div class='wrapper'> 
    <img border="3"/> 
</div> 

CSS

.wrapper { 
    /*position: absolute;*/ 
    /* position details here */ 
    overflow: hidden; 
    text-align:center 
} 
.wrapper img { 
    height: 100%; 
}