डिव के अंदर एक छवि को लंबवत रूप से कैसे संरेखित करें

Question

आप किसी छवि को किसी संरेखण के अंदर कैसे संरेखित कर सकते हैं div?

उदाहरण

मेरे उदाहरण में, मैं खड़ी केंद्रित करने के लिए की जरूरत <img>में <div>साथ class ="frame":

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

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

यहाँ jsfiddle देखें ।

.frame {
    height: 25px;      /* Equals maximum 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>

Comments

हैलो, क्षमा करें, लेकिन मैं सबसे अधिक मूल्यवान समाधान होने के नाते एक सहायक का उपयोग करने के बारे में असहमत हूं। लेकिन यह एकमात्र तरीका नहीं है। अन्य लोग ब्राउज़रों द्वारा समर्थित हैं। मैं जानकारी के बारे में stackoverflow.com/a/43308414/7733724 और W3C.org नीचे एक समाधान प्रदान करता हूं। आप जाँच कर सकते हैं। चीयर्स

— सैम

: W3C पर पढ़ना एकत्रित हालात लेख उपयोगी होगा w3.org/Style/Examples/007/center.en.html

— Qmaster

संरेखित करें css-tricks.com/centering-css-complete-guide के

— माइकल युरिन

Answer 1

केवल (और सबसे अच्छा पार ब्राउज़र) तरीके के रूप में मैं जानता हूँ कि एक का उपयोग करने के लिए है inline-blockके साथ सहायक height: 100%और vertical-align: middleदोनों तत्वों पर।

तो एक उपाय है: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

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

इंटरनेट एक्सप्लोरर के साथ :beforeऔर इसके expression()लिए समाधान : http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

---

यह काम किस प्रकार करता है:

1. जब आपके पास दो inline-blockतत्व एक-दूसरे के पास होते हैं, तो आप एक-दूसरे के पक्ष में संरेखित कर सकते हैं, इसलिए vertical-align: middleआपको कुछ इस तरह मिलेगा:

   

2. आप निश्चित ऊंचाई (में से एक ब्लॉक है जब px, emया किसी अन्य पूर्ण इकाई), तो आप में भीतरी ब्लॉक की ऊंचाई सेट कर सकते हैं %।

3. तो, एक के inline-blockसाथ height: 100%एक ब्लॉक को निश्चित ऊंचाई के साथ जोड़ने से इसमें एक और inline-blockतत्व संरेखित होगा ( <img/>आपके मामले में) इसके पास लंबवत।

Comments

आप खुद देख सकते हैं: jsfiddle.net/kizu/Pw9NL - केवल इनलाइन बॉक्स एक बॉक्स उत्पन्न नहीं करते हैं, लेकिन अन्य सभी मामले ठीक काम करते हैं।

— किजू

बहुत अच्छा जवाब। मैं इनलाइन ब्लॉक तत्वों के बीच रिक्त स्थान के साथ संघर्ष कर रहा था, जिसका अर्थ है .frameऔर .frame:before। यहां प्रस्तावित एक समाधान को जोड़ना margin-left: -4pxहै .frame। उम्मीद है की यह मदद करेगा।

— मिक

ध्यान दें कि: सहायक जोड़ा गया है कि <img src=""/>अंदर नहीं है <span></span>। यह बाहर है। मैं बस के बारे में यह एहसास नहीं द्वारा हमारे बालों के हर किनारा खींच लिया।

— रियान

ऐसा लगता है जैसे आपको "व्हाइट-स्पेस: नॉवर;" यदि आप अपनी छवि और हेल्पर स्पैन के बीच लाइन ब्रेक हैं, तो फ्रेम में या आप एक मुद्दे पर चलेंगे। मुझे एक घंटे का समय लगा क्योंकि यह समाधान मेरे लिए काम नहीं कर रहा था।

— जुमिनोज़

मेरे मामले में, मेरी छवि में अधिकतम-ऊँचाई और अधिकतम-चौड़ाई दोनों थी जो 100% तक सेट थी, इसलिए छवि कंटेनर को स्केल करेगी, और यह विधि काम नहीं करती थी। मेरा समाधान इन मानों को 90% तक बदलना था (जो मेरे मामले में ठीक था; एक अन्य स्थिति में आपको तदनुसार कंटेनर को स्केल करने की आवश्यकता हो सकती है), और छवि के दूसरी तरफ एक सहायक भी जोड़ सकते हैं ताकि पैडिंग भी बनी रहे। दोनों पक्षों।

— एरिक दुबे

Answer 2

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

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

Comments

यदि आप छवि को क्षैतिज रूप से संरेखित करना चाहते हैं, तो बाईं ओर जोड़ें: 0; सही: 0; img

— jameskind

यह एक IE1 में काम नहीं कर रहा है? मैं इसे पूरे स्थान पर उपयोग कर रहा हूं

— मैक्स यारी

कंटेनर डिव के साथ भी (मेरे लिए) काम करता हैposition:fixed;

— पीजे ब्रुनेट

सबसे आसान और साफ समाधान धन्यवाद!

— केडीटी

धन्यवाद! मेरे लिए काम किया !!

— अलेक्जेंडर मैलेगिन

Answer 3

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

Comments

2x अनुकूलित करने के लिए कोई भी तरीका ताकि आप 2x छवि पर ज़ूम कर सकें, और यह अभी भी क्षैतिज और लंबवत केंद्रित रहेगा?

— जस्टिन

यदि हम इसे मध्य के बजाय ऊर्ध्वाधर संरेखित तल के लिए काम करना चाहते हैं, तो किन कोडों को संशोधित किया जाना चाहिए?

— बोबो

@ बबो सिर्फ हटाओ top: 0;। यह केवल bottom: 0;लंबवत रूप से लागू होने के परिणामस्वरूप होता है।

— जोमो

सबसे अच्छा जवाब!

— user315338

Answer 4

एक तीन-पंक्ति समाधान:

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

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

से यहाँ ।

Comments

उपसर्ग: -ms- या -webkit- (परिवर्तन से पहले)। w3schools.com/cssref/css3_pr_transform.asp

— Jorge Orpinel

IE9 के लिए उपसर्ग, लेकिन IE8 और लोअर में बिल्कुल काम नहीं कर रहा है: caniuse.com/#search=transform लेकिन मेरी राय: मुझे IE8 की परवाह नहीं है

— Reign.85

किसी ने ध्यान नहीं दिया कि जब बच्चा केंद्रित होता है तो डिवाइस स्क्रीन से लंबा होता है और माता-पिता डोम में पहला बच्चा होता है ...?

— ताओ

अच्छा है जब आप उपयोग नहीं कर सकते position: absolute;क्योंकि आपको एक बहने वाली चौड़ाई की आवश्यकता होती है।

— 19

सबसे अच्छा समाधान अब तक, फ्लेक्सबॉक्स से भी बेहतर, अधिकांश सभी ब्राउज़रों के लिए एक समर्थन के साथ आधुनिक और लोगों के लिए। कृपया इसे

— आगे बढ़ाएं

Answer 5

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

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

<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>

मुख्य सामान

// 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

Comments

कृपया मुझे यहां एक मार्गदर्शक का उल्लेख करें जो IE5 के लिए भी काम करता है (जो मैंने अब तक पोस्ट में पढ़ा है उससे घटाकर) webmasterworld.com/css/3350566.htm

— Matej

यह समाधान एक अच्छी शुरुआत है, लेकिन ओवरसाइज़्ड छवियां गलत अनुपात के साथ आकार लेती हैं । कृपया मेरा उत्तर देखें।

— जोमो

@ HansWürstchen हाँ, लेकिन बात यह है कि क्या यह ओवरसाइज़ हो जाता है, डिजाइन की पसंद है। अधिक सीएसएस जोड़ना = अधिक अव्यवस्था :)

— Matej

@matejkramny यह नहीं है मिल बड़े। यदि छवि की देखरेख की जाती है, तो इसका गलत अनुपात है। इसका मतलब है कि यह ऊंचाई में फैला है और ठीक से नहीं दिखता है।

— जमो

This वाह, यह अतिप्रवाहित चित्रों (आवरण से बड़ा) के साथ काम करता है, स्वीकृत उत्तर नहीं देता है।

— सेड्रिक रीचेनबाक

Answer 6

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

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: 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

Comments

कंटेनर की ऊंचाई निर्धारित नहीं होने पर यह विशेष रूप से उपयोगी है

— डेव बार्नेट

या align-selfव्यक्तिगत आइटम के लिए

— माइकल

इसके साथ समस्या align-selfयह है कि फ्लेक्स आइटम पैरेंट कंटेनर की ऊंचाई को बढ़ाएंगे।

— रिकार्डो

Answer 7

इस तरह आप एक छवि को लंबवत ( डेमो ) केन्द्रित कर सकते हैं :

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Comments

अजीब तरह से मुझे अपनी स्थिति में काम करने के लिए स्वीकृत उत्तर नहीं मिल सका (मैं भी अतिप्रवाह के साथ छवि को क्रॉप कर रहा था: छिपा हुआ)। यह हालांकि प्रीफेक्टली काम किया।

— लुका स्पिलर

मैंने इसे केवल Chrome में परीक्षण किया है, लेकिन लाइन-ऊँचाई कुंजी प्रतीत होती है। मैंने img के बजाय div पर वर्टिकल-अलाइन विशेषता को रखा है, क्योंकि मेरा img एक एंकर (<a/>) के अंदर है।

— टोड प्राइज

हां, बहुत सरल तो स्वीकृत समाधान है, और खूबसूरती से काम करता है। मुझे इसका समाधान jsfiddle में भी मिला।

— vdboor

यदि आप जानते हैं कि किस चीज को पूरा करना है, तो यह बहुत अच्छी तरह से काम करता है

— KrekkieD

मेरे अवसान से यह समाधान केवल उसी के लिए काम करता font-size: 0है div। काफी बड़े कंटेनरों के लिए आप इसे मिस कर सकते हैं लेकिन अगर आपका div100px और img 80px है तो यह कुछ पिक्सेल कम होगा।

— alTus

Answer 8

इसके अलावा, आप सही परिणाम प्राप्त करने के लिए 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/stackoverflow-128.png" />
</div>

Answer 9

Flexbox के साथ एक सुपर आसान समाधान है !

.frame {
    display: flex;
    align-items: center;
}

Comments

हां लेकिन आप शायद ही इसे सभी उत्तरों में देख सकते हैं। मैं इसे और स्पष्ट रूप से उजागर करने की कोशिश कर रहा था क्योंकि यह अन्य सभी उत्तरों की तुलना में बहुत आसान समाधान है।

— ११:०५ पर बीब्लैकवो

यह सबसे अच्छा जवाब है जिसने मेरे लिए भी काम किया। लेकिन फ्रेम में मेरे मामले में "इनलाइन-फ्लेक्स" ने मेरे लिए बेहतर काम किया। और इसके अंदर की छवि के लिए मैंने जोड़ा: "ऊर्ध्वाधर-संरेखित करें: मध्य"।

— सोफी कूपरमैन

Answer 10

आप PI का CSS सेट करने की कोशिश कर सकते हैं display: table-cell; vertical-align: middle;

Comments

मैंने विभिन्न विधियां देखी हैं, लेकिन यह एक नया (2013 में भी) मेरे लिए था।

— माइक एबर्ट

छवि को किसी तालिका के अंदर रखने से बेहतर है कि उसे केंद्र में रखा जाए।

— जोनाट्स

प्रदर्शन: टेबल-सेल हमेशा सही ढंग से आकार नहीं देता है यदि आप चाहते हैं कि चौड़ाई 100% हो

— Redtopia

" PI" क्या है ?

— पीटर मोर्टेंसन

Answer 11

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

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

Answer 12

पृष्ठभूमि छवि समाधान

मैंने छवि तत्व को पूरी तरह से हटा दिया और इसे एक वर्ग के साथ div की पृष्ठभूमि के रूप में सेट किया .frame

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

यह कम से कम इंटरनेट एक्सप्लोरर 8, फ़ायरफ़ॉक्स 6 और क्रोम 13 पर ठीक काम करता है।

मैंने जाँच की, और यह समाधान 25 पिक्सेल ऊँचाई से बड़ी छवियों को सिकोड़ने के लिए काम नहीं करेगा। एक संपत्ति है जिसे कहा जाता है background-sizeजो तत्व का आकार निर्धारित करता है, लेकिन यह CSS 3 है जो इंटरनेट एक्सप्लोरर 7 आवश्यकताओं के साथ संघर्ष करेगा।

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

Comments

बहुत अच्छा समाधान है, हालाँकि मैं कुछ छवियों को कंटेनर से बड़ा होने की उम्मीद करता हूं, और इस मामले में मैंने उन पर अधिकतम ऊंचाई / अधिकतम-चौड़ाई का उपयोग करने की योजना बनाई है। पृष्ठभूमि छवियों के साथ ऐसा करने का कोई तरीका?

— अरनौद ले ब्लैंक

यह ".frame तत्व" नहीं है। यह ".frame के एक वर्ग के साथ एक div" है

— JGallardo

यदि छवि की ऊँचाई फ़्रेम div की ऊँचाई से अधिक नहीं है, तो यह सबसे अच्छा और सरल उपाय है ...

— efirat

Answer 13

आप कल्पना कीजिए

<div class="wrap">
    <img src="#">
</div>

और सीएसएस:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Comments

Uau! फ्लेक्स वास्तव में रज्जो! धन्यवाद!

— पेड्रो फरेरा

ऑब्जेक्ट-फिट कवर का उपयोग करें यदि आप चाहते हैं कि बच्चा माता-पिता की पूरी चौड़ाई ले और फिर भी मध्य में लंबवत रूप से संरेखित हो। देखें css-tricks.com/snippets/css/a-guide-to-flexbox फ्लेक्स-बॉक्स का उपयोग कर माता-पिता में छवि के चारों ओर ले जाने के लिए

— mattdlockyer

Answer 14

आप ऐसा कर सकते हैं:

डेमो

http://jsfiddle.net/DZ8vW/1

सीएसएस

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    

जावास्क्रिप्ट

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Comments

अच्छा लगा। शुद्ध-सीएसएस समाधान के लिए कोई मौका?

— अरनौद ले ब्लैंक

जब तक आप IE के पुराने संस्करणों के साथ तालिकाओं या ड्रॉप संगतता का उपयोग नहीं करना चाहते, दुर्भाग्य से नहीं :( यदि आपको पता था कि चित्रों का सटीक आकार हाथ से पहले अलग होगा, लेकिन इसके बिना यह अकेले सीएसएस के साथ संभव नहीं है।

— जोसेफ मैरीकल

@ जोसेफ आप इसे तालिकाओं के साथ कैसे ठीक करेंगे?

— बेंजामिन उडिंक ने 19

@ बैंजामिन उडिंक दस केट यह गन्दा है, लेकिन इसे इस तरह से किया जा सकता है: jsfiddle.net/DZ8vW/2 (यह सलाह नहीं दी जाती है, लेकिन काम करना चाहिए)

— जोसेफ मैरीकल

वैसे यह सूट पूरी तरह से जरूरत है। कोई JS, केवल CSS और HTML।

— बेंजामिन उडिंक दस केट

Answer 15

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum 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;
}

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

यह फ़ायरफ़ॉक्स, ओपेरा, क्रोम, सफारी और इंटरनेट एक्सप्लोरर 8 (और बाद में) में काम करता है।

अपडेट करें

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

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

Comments

महान। IE7 के लिए कोई हैक जो जावास्क्रिप्ट से बचना होगा?

— अरनौद ले ब्लैंक

मुझे यकीन नहीं है, लेकिन शायद सीएसएस अभिव्यक्तियों से मदद मिलेगी। लेकिन वे जावास्क्रिप्ट भी हैं। फर्क सिर्फ इतना है, कि आप उन्हें सीएसएस फाइलों में लिखते हैं, js में नहीं।

— वेबर्स

हाँ, अच्छा विचार है। यह अधिक प्रबंधनीय होगा (स्क्रिप्ट स्वचालित रूप से आवश्यकतानुसार चलती है), और जैसा कि यह IE7 होना चाहिए-केवल यह ठीक है।

— अरनौद ले ब्लैंक

Answer 16

मेरा समाधान: 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;
}

Answer 17

यह आधुनिक ब्राउज़रों के लिए काम करता है (2016 के संपादन के समय) जैसा कि इस डेमो में कोडपेन पर दिखाया गया है

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

यह बहुत महत्वपूर्ण है कि आप या तो छवियों को एक वर्ग दें या उन छवियों को लक्षित करने के लिए विरासत का उपयोग करें जिन्हें आपको केंद्रित करने की आवश्यकता है। इस उदाहरण में हमने .frame img {}ऐसा इस्तेमाल किया है कि केवल एक वर्ग के साथ एक div द्वारा लिपटे चित्रों .frameको लक्षित किया जाएगा।

Comments

केवल ie7, बस लाइन-ऊँचाई: 25px;

— ३

यह ठीक से फ़ायरफ़ॉक्स और क्रोम ( jsfiddle.net/4RPFa/19 ) पर भी ठीक से संरेखित नहीं होता है

— अरनौद ले ब्लैंक

Answer 18

शुद्ध सीएसएस http://jsfiddle.net/sandeep/4RPFa/72/ के साथ इस समाधान का प्रयास करें

शायद यह आपके HTML की मुख्य समस्या है। जब आप अपने HTML में c lass& को परिभाषित करते हैं तो आप उद्धरणों का उपयोग नहीं करते हैं image height।

सीएसएस:

.frame {
    height: 25px;      /* Equals maximum 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टैग के साथ काम करता हूँ तो यह 3 पिक्सेल से 2 पिक्सेल की जगह छोड़ देता है top। अब मैं घटता हूं line-height, और यह काम कर रहा है।

सीएसएस:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    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संपत्ति विभिन्न ब्राउज़र में विभिन्न प्रदान की गई है। इसलिए, हमें अलग-अलग line-heightप्रॉपर्टी ब्राउज़र को परिभाषित करना होगा ।

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

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

Comments

काम नहीं करता है (कम से कम फ़ायरफ़ॉक्स में)। गुम उद्धरणों के लिए, यह HTML5 में अनुमति देता है (पता नहीं कि कौन सा सिद्धांत jsfiddle में उपयोग किया जाता है)

— अरनौद ले ब्लैंक

Answer 19

मुझे यकीन है कि इंटरनेट एक्सप्लोरर के बारे में नहीं हूँ, लेकिन फ़ायरफ़ॉक्स और क्रोम के तहत, आप एक है, तो imgएक में divकंटेनर, निम्नलिखित सीएसएस सामग्री काम करना चाहिए। कम से कम मेरे लिए यह अच्छी तरह से काम करता है:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Comments

IE8 +, दुर्भाग्य से। मेरे लिए ठीक है, लेकिन शायद दूसरों के लिए नहीं।

— कार्वर

यह भी ध्यान रखें कि display:table-cell;चौड़ाई के रूप में% स्वीकार नहीं करता है

— मटमैट

Answer 20

एक तालिका और तालिका कोशिकाओं का उपयोग कर समाधान

कभी-कभी इसे टेबल / टेबल-सेल के रूप में प्रदर्शित करके हल किया जाना चाहिए। उदाहरण के लिए, एक तेज़ शीर्षक स्क्रीन। यह 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>

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

Answer 21

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

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

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

Answer 22

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

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

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

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

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Answer 23

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

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

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

Answer 24

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

<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>

Comments

वास्तव में छवि पर "स्थिति: निश्चित" ने मेरे लिए काम किया जहां मैं टेबल-सेल पद्धति का सुझाव देने वाले लोगों के कई झूठे जवाबों पर निराश हो गया हूं जो मेरे कार्यों के प्रतिद्वंद्वी में काम नहीं करते थे। Algreat द्वारा सुझाई गई विधि के साथ आपको एक अतिरिक्त कंटेनर की भी आवश्यकता नहीं है।

— २०'१४ को वासिलियो पस्पालस

Answer 25

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

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

Answer 26

उपयोग 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/stackoverflow-128.png" />
  </div>
</div> 

Answer 27

मैं केंद्र संरेखण के लिए पैडिंग का उपयोग करने के साथ चारों ओर खेल रहा हूं। आपको शीर्ष स्तर के बाहरी-कंटेनर आकार को परिभाषित करने की आवश्यकता होगी, लेकिन आंतरिक कंटेनर को आकार बदलना चाहिए, और आप पैडिंग को विभिन्न प्रतिशत मूल्यों पर सेट कर सकते हैं।

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Answer 28

सबसे अच्छा उपाय यही है

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Answer 29

इस एक का उपयोग करें:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

और आप अलग-अलग हो सकते हैं font-size।

Answer 30

एक छवि को संरेखित करना चाहते हैं जो पाठ / शीर्षक के बाद हैं और दोनों एक div के अंदर हैं?

JSfiddle या रन कोड स्निपेट पर देखें ।

बस अपने सभी तत्वों (div, img, title, आदि) पर एक आईडी या एक कक्षा होना सुनिश्चित करें।

मेरे लिए यह समाधान सभी ब्राउज़रों पर काम करता है (मोबाइल उपकरणों के लिए आपको अपने कोड को अपने साथ अनुकूलित करना होगा: @मीडिया)।

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>