css - डिव के अंदर एक छवि को लंबवत कैसे संरेखित करें?




image vertical-alignment (20)

सवाल

आप एक युक्त div अंदर एक छवि कैसे संरेखित कर सकते हैं?

उदाहरण

मेरे उदाहरण में, मुझे <div> में class ="frame " के साथ <img> को लंबवत रूप से केंद्रित करने की आवश्यकता है।

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame की ऊंचाई तय हो गई है और छवि की ऊंचाई अज्ञात है। अगर यह एकमात्र समाधान है तो मैं .frame में नए तत्व जोड़ सकता हूं। मैं IE≥7, वेबकिट, गेको पर ऐसा करने की कोशिश कर रहा हूं।

here jsfiddle देखें

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
        
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>


समाधान का उपयोग टेबल और टेबल सेल का उपयोग करना

कभी-कभी इसे टेबल / टेबल-सेल के रूप में प्रदर्शित करके हल किया जाना चाहिए। उदाहरण के लिए एक तेज़ शीर्षक स्क्रीन। यह W3 द्वारा भी अनुशंसित तरीका है। मेरा सुझाव है कि आप इस लिंक को W3C.org से सेंटरिंग चीजों की जाँच करें

यहाँ इस्तेमाल युक्तियाँ हैं:

  • पूर्ण स्थिति कंटेनर को टेबल के रूप में प्रदर्शित किया जाता है
  • तालिका-सेल के रूप में प्रदर्शित केंद्र सामग्री के लिए लंबवत संरेखित

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center"> PEACE IN THE WORLD </h1>
 </div>
</div> 

व्यक्तिगत रूप से मैं वास्तव में इस उद्देश्य के लिए उपयोग सहायकों के बारे में असहमत हूं


3 लाइन समाधान:

position: relative;
top: 50%;
transform: translateY(-50%);

यह किसी भी चीज पर लागू होता है।

here


आप display: table-cell; vertical-align: middle; करने के लिए PI का CSS सेट करने का प्रयास कर सकते display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;


आप इसका उपयोग कर सकते हैं:

.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;

}


आप नीचे दिए गए कोड की कोशिश कर सकते हैं

.frame{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
} 
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>


आसान तरीका जो मेरे लिए काम करता है:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Google Chrome के लिए बहुत अच्छा काम करता है। इसे अलग-अलग ब्राउज़र पर देखें।


इस तरह के कुछ पाठ के अलावा एक कंटेनर (यह एक लोगो हो सकता है) के अंदर एक छवि को केंद्रित करने के लिए:

मूल रूप से आप छवि को लपेटते हैं

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


इसके अलावा, आप सही परिणाम प्राप्त करने के लिए Flexbox का उपयोग कर सकते हैं:

.parent {
  align-items: center; /* for vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/-128.png" />
</div>


उन लोगों के लिए जो इस पद पर उतरे और अधिक आधुनिक समाधान में रुचि रखते हैं, और जिन्हें विरासत ब्राउज़रों का समर्थन करने की कोई आवश्यकता नहीं है, आप यह कर सकते हैं:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

यहाँ एक पेन है: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


एक शुद्ध सीएसएस समाधान:

http://jsfiddle.net/3MVPM/

सीएसएस:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

मुख्य सामान

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

मुझे भी यही समस्या थी। यह मेरे लिए काम करता है:

<style type="text/css">
div.parent {
     position: relative;
}

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<div class="parent">
    <img class="child">
</div>

मेरा समाधान: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

मैं यहाँ पोस्ट किया गया पुराना JSFiddle लिंक, अब और काम नहीं करता, शायद यही कारण है डाउनवोट का। बस यह एक वैध जवाब होने के लिए मैं अभी भी फिर से jQuery समाधान पोस्ट करना चाहते हैं। यह उस प्रत्येक तत्व के लिए काम करता है जिसके पास v_align वर्ग है जो इसके लिए लागू होता है। यह माता-पिता में लंबवत केंद्रित होगा और खिड़की के आकार बदलने पर इसे पुनर्गणना किया जाएगा।

JSFiddle से लिंक करें

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

यदि आप पिक्सेल-आकार के मार्जिन के साथ रह सकते हैं, तो बस font-size: 1px; जोड़ें font-size: 1px; .frame । लेकिन याद रखें, कि अब .frame 1em = 1px पर, जिसका अर्थ है, आपको पिक्सेल में भी मार्जिन सेट करने की आवश्यकता है।

http://jsfiddle.net/feeela/4RPFa/96/

संपादित करें: अब यह ओपेरा में केंद्रित नहीं है ...


यह उपयोगी हो सकता है:

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

संदर्भ: http://www.student.oulu.fi/~laurirai/www/css/middle/


शुद्ध सीएसएस के साथ इस समाधान की कोशिश करें http://jsfiddle.net/sandeep/4RPFa/72/ आपके html के साथ मुख्य समस्या हो सकती है। जब आप अपने HTML में c lass & image height को परिभाषित करते हैं तो आप उद्धरण का उपयोग नहीं करते हैं।

सीएसएस:

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    position:relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom:20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;
    margin:0 auto;
    max-height:25px;
}

संपादित करें:

जब मैं img टैग के साथ काम करता हूँ तो यह top से 3px to 2px जगह छोड़ देता है। अब मैं line-height कम करता हूं और यह काम करता है। सीएसएस:

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height:0;    
        max-height:25px;
        max-width:160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* webkit browsers */
    }

line-height संपत्ति अलग-अलग ब्राउज़रों में अलग-अलग रूप से render है। इसलिए; हमें अलग line-height अलग line-height प्रॉपर्टी ब्राउज़र को परिभाषित करना होगा

इस उदाहरण की जाँच करें http://jsfiddle.net/sandeep/4be8t/11/

फ़ायरफ़ॉक्स और क्रोम में अलग line-height अलग ब्राउज़र इनपुट ऊंचाई अंतर में line-height बारे में इस उदाहरण की जाँच करें


http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

प्रमुख संपत्ति प्रदर्शन है: टेबल-सेल; के लिए। Div.frame को इसके साथ इनलाइन के रूप में प्रदर्शित किया जाता है, इसलिए आपको इसे ब्लॉक तत्व में लपेटने की आवश्यकता है।

यह FF, ओपेरा, क्रोम, सफारी और IE8 + में काम करता है।

अद्यतन करें

IE7 के लिए हमें एक css अभिव्यक्ति जोड़ने की आवश्यकता है:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

table और table-cell पद्धति का उपयोग करते हुए काम करते हैं, विशेष रूप से क्योंकि आप कुछ पुराने ब्राउज़रों को लक्षित करते हैं, मैं आपके लिए एक स्निपेट बनाता हूं जिसे आप इसे चला सकते हैं और परिणाम की जांच कर सकते हैं:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/-128.png" />
  </div>
</div> 


matejkramny का समाधान एक अच्छी शुरुआत है, लेकिन ओवरसाइज़ की गई छवियों का गलत अनुपात है।
यहाँ मेरा कांटा है:

डेमो: https://jsbin.com/lidebapomi/edit?html,css,output

HTML:

<div class="frame">
  <img src="foo"/>
</div>

सीएसएस:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

बैकग्राउंड इमेज सॉल्यूशन मैंने इमेज एलिमेंट को एक साथ हटा दिया है और इसे .frame क्लास के साथ डिव के बैकग्राउंड के रूप में सेट किया है

http://jsfiddle.net/URVKa/2/

यह कम से कम IE8, FF6 और Chrome13 पर ठीक काम करता है

मैंने जाँच की, यह सॉल्यूशन छवियों को बड़ा करने के लिए 25px ऊँचाई पर काम नहीं करेगा। background-size नामक एक संपत्ति है जो तत्व का आकार निर्धारित करती है, लेकिन यह CSS3 है जो IE7 आवश्यकता के साथ संघर्ष करेगी।

मैं आपको सलाह दूंगा कि आप अपनी ब्राउज़र प्राथमिकताओं को फिर से तैयार करें और सर्वोत्तम उपलब्ध ब्राउज़रों के लिए डिज़ाइन करें, या यदि आप इस समाधान का उपयोग करना चाहते हैं तो छवियों को आकार देने के लिए कुछ सर्वरसाइड कोड प्राप्त करें





vertical-alignment