सीएसएस केंद्र छवि एक क्लिपेंट पैरेंट div

Question

मैं टैग में पर सेट img को कैसे केंद्रित कर सकता हूं। यही है, मैं चाहता हूं कि छवि को क्लिप करना है लेकिन बाएं/दाएं दोनों पर क्लिप करें ताकि छवि के बीच दिखाया जा सके।

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

तो जैसे शैलियों कुछ:

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

-50% माता पिता की चौड़ाई होगा, लेकिन मैं img खुद की चौड़ाई चाहते हैं।

फ़ायरफ़ॉक्स समर्थित सीएसएस स्वीकार्य है।

Answer 1

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

उपयोग पाठ के अनुरूप, line-height, ऊर्ध्वाधर- align और नकारात्मक मार्जिन। img वर्चुअल रूप से शून्य तक कम हो जाएगा, खुद ही केंद्र होगा।

.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; 
} 

क्षैतिज केवल के लिए:

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

Answer 2

प्रयास करें जोड़ने के लिए

display:block; 
margin:0px auto; 

".wrapper img"

Answer 3

हाय कृपया जाँच करने के लिए example

अपनी अपनी समस्या को हल

एचटीएमएल

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

सीएसएस

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