सीएसएस

Question

के साथ मूल div के भीतर वर्टिकल संरेखण छवि तो मैं एक कंटेनर div के भीतर छवियों को लंबवत संरेखित करने की कोशिश कर रहा हूं। मैंने ऊर्ध्वाधर-संरेखण जोड़ने की कोशिश की: मध्य; बिना भाग्य के माता पिता को।

<div class="contributor_thumbnail"><img src="image.jpg"></div> 
    <div class="contributor_thumbnail"><img src="image.jpg"></div> 

.contributor_thumbnail { 

    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    vertical-align: middle; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 

Answer 1

मुझे क्या होगा एक पृष्ठभूमि छवि के रूप में छवि सेट है।

.contributor_thumbnail { 
    /* Background image instead of using and img tag */ 
    background: url(image.jpg) center center no-repeat; 
    position: relative; 
    display: block; 
    float: left; 
    width: 150px; 
    height: 150px; 
    line-height: 100%; 
    text-align: center; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    padding: 5px; 
    border: 1px solid #bbbbbb; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 

} 

Answer 2

.contributor_thumbnail img { 
    margin-left: auto; 
    margin-right: auto; 
} 

http://www.bluerobot.com/web/css/center1.html

Answer 3

इस प्रयास करें:

एचटीएमएल

<div class="contributor_thumbnail"> 
<div class="content"> 
    <img src="image.jpg"> 
</div> 
</div> 

सीएसएस: Lost in the Woods vertically centering with CSS:

.contributor_thumbnail {float:left; height:50%; margin-bottom:-120px;} 
.content {clear:both; height:240px; position:relative;} 

से प्रेरित होकर।