छवि के बगल में लंबवत पाठ संरेखित करें?

Question

vertical-align: middleकाम क्यों नहीं करेगा ? और फिर भी, काम vertical-align: top करता है ।

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Comments

यहाँ एक दिलचस्प लेख है: अंडरस्टैंडिंगvertical-align

— फ्रेड्रस

Answer 1

दरअसल, इस मामले में यह काफी सरल है: छवि के लिए लंबवत संरेखित करें। चूंकि यह सब एक पंक्ति में है, यह वास्तव में वह छवि है जिसे आप संरेखित करना चाहते हैं, पाठ नहीं।

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3 में परीक्षण किया गया।

अब आप इस प्रकार के लेआउट के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं।

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Comments

"चूंकि यह सब एक पंक्ति में है, यह वास्तव में वह छवि है जिसे आप संरेखित करना चाहते हैं, पाठ नहीं।" - नहीं, छवि ठीक है जहां यह है। हम पाठ को संरेखित करना चाहते हैं। छवि नहीं। - मुझे लगता है कि यह काम करता है (कुछ परिस्थितियों में, पूर्व: जब आप छवि पर "फ्लोट: लेफ्ट" का उपयोग नहीं कर रहे हैं ...), लेकिन यह सिर्फ विचित्र और अचूक है जो शारीरिक रूप से पाठ को ऊर्ध्वाधर मध्य में स्थानांतरित करने के लिए है इसके बजाय छवि के बगल में एक विशेषता लागू करना होगा।

— BrainSlugs83 2

@ BrainSlug83 यह निश्चित रूप से विचित्र नहीं है, लेकिन मैं देख सकता हूं कि नए लोगों को इससे कैसे जोड़ा जा सकता है। डिफ़ॉल्ट रूप से एक छवि को टेक्स्ट बेसलाइन पर रखा जाएगा। आप जो कुछ भी कर रहे हैं, वह उस स्थान पर जा रहा है जहां छवि पाठ के सापेक्ष संलग्न है। फ्लोट का उपयोग करने के लिए: बाएं, आपको ऐसा करना चाहिए जिसमें या तो छवि और पाठ में या पाठ पर ही ब्लॉक हो।

— jamesrom

@ BrainSlugs83 सहमत है कि इसे प्रति-सहज ज्ञान युक्त के रूप में देखा जा सकता है। यह एक मानसिक बदलाव का एक सा लगता है, क्योंकि सीएसएस के अनुसार, आपको जो करने की आवश्यकता है वह छवि को पाठ में केंद्रित करना है। छवि का पाठ नहीं।

— ग्रेग पेटिट

यदि आप spanफ़ॉन्ट आकार बढ़ाते हैं तो यह काम नहीं करता है । मेरा जवाब देखिए ।

— मोरी

लेकिन अगर आप एक छोटे आकार (जैसे width:16px;height:16px) के लिए छवि का आकार सेट करते हैं, तो आप देख सकते हैं कि छवि बहुत कम हो जाएगी ...

— मैथ्यू चारबोनियर

Answer 2

यहाँ ऊर्ध्वाधर-संरेखित करने के लिए कुछ सरल तकनीकें दी गई हैं:

एक-पंक्ति ऊर्ध्वाधर-संरेखित करें: मध्य

यह एक आसान है: कंटेनर के बराबर टेक्स्ट तत्व की लाइन-ऊँचाई सेट करें

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

कई-रेखाएं लंबवत-संरेखित करें: नीचे

इसके कंटेनर के सापेक्ष एक आंतरिक div स्थिति

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

कई-रेखाएं लंबवत-संरेखित करें: मध्य

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

यदि आपको IE <= 7 के प्राचीन संस्करणों का समर्थन करना चाहिए

इसे पूरे मंडल में सही ढंग से काम करने के लिए, आपको CSS को थोड़ा हैक करना होगा। सौभाग्य से, एक IE बग है जो हमारे पक्ष में काम करता है। top:50%कंटेनर और top:-50%आंतरिक डिव पर सेट करना , आप एक ही परिणाम प्राप्त कर सकते हैं। हम दोनों को एक और विशेषता के साथ जोड़ सकते हैं IE का समर्थन नहीं करता है: उन्नत सीएसएस चयनकर्ता।

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

चर कंटेनर ऊंचाई ऊर्ध्वाधर-संरेखित करें: मध्य

इस समाधान को अन्य समाधानों की तुलना में थोड़ा अधिक आधुनिक ब्राउज़र की आवश्यकता है, क्योंकि यह इसका उपयोग करता है transform: translateY संपत्ति है। ( http://caniuse.com/#feat=transforms2d )

सीएसएस की निम्नलिखित 3 पंक्तियों को एक तत्व में लागू करना, मूल तत्व की ऊंचाई की परवाह किए बिना इसे अपने माता-पिता के भीतर केंद्र में रखेगा:

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

Comments

display:tableऔर display:table-cellCSS चयनकर्ताओं का महान काम करते हैं, को छोड़कर, ज़ाहिर है, IE7 में और नीचे। कई घंटों तक मेरे बाल फाड़ने के बाद, मैंने फैसला किया कि मुझे वास्तव में किसी के साथ व्यवहार करने की ज़रूरत नहीं है जो अभी भी IE7- का उपयोग करता है।

— बन्नसी

display:tableविभिन्न ब्राउज़रों में कुछ सीमाएँ हैं (IE11 में max-heightकाम नहीं करता है यदि तत्व एक तालिका सेल के अंदर है), इसलिए कुछ बढ़त के मामलों में तालिका कोशिकाओं का उपयोग करके लंबवत संरेखित करना अच्छा नहीं है।

— जाहू

Answer 3

अपने divफ्लेक्स कंटेनर में बदलें :

div { display:flex; }

अब सभी सामग्री के लिए संरेखण को केन्द्रित करने के दो तरीके हैं:

विधि 1:

div { align-items:center; }

डेमो

---

विधि 2:

div * { margin-top:auto; margin-bottom:auto; }

डेमो

---

और पर imgविभिन्न फ़ॉन्ट आकार मानों पर विभिन्न चौड़ाई और ऊँचाई मान आज़माएँ spanऔर आप देखेंगे कि वे हमेशा कंटेनर के बीच में रहेंगे।

Comments

छवियों के बीच या (पृष्ठ पर क्षैतिज रूप से) के बीच के पाठ को केंद्र में रखने के लिए, आपको justify-content: center;स्पेसिंग (<br/> टैग्स का उपयोग किए बिना) जोड़ने की भी आवश्यकता होगी padding: 1em;। हमारे लिए आधुनिक ब्राउज़र देवों का शानदार अपडेट।

— CSS

इसने अच्छा काम किया। मैंने प्रत्येक और हर किसी के जवाब की कोशिश की, और जब वे एक हद तक काम करते थे, तो यह मेरे लिए काम नहीं करता था। संरेखित करने के लिए मेरे पास पाठ की लगभग 3 पंक्तियाँ थीं, और इस उत्तर ने पूरी तरह से काम किया। धन्यवाद @ मोरी

— अर्धरात्रि

Answer 4

आपको vertical-align: middleइसे पूरी तरह से केंद्रित करने के लिए दोनों तत्वों पर लागू करना होगा।

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

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

बाईं ओर, पाठ संरेखित नहीं है, दाईं ओर जैसा कि ऊपर दिखाया गया है। इस आलेख में एक लाइव डेमो ऊर्ध्वाधर-संरेखित के बारे में पाया जा सकता है ।

क्या किसी ने इस बारे में बात की है कि vertical-align: topपरिदृश्य में काम क्यों होता है? प्रश्न में छवि संभवतः पाठ से अधिक लंबी है और इस प्रकार लाइन बॉक्स के ऊपरी किनारे को परिभाषित करती है। vertical-align: topस्पैन एलिमेंट पर फिर इसे लाइन बॉक्स के शीर्ष पर स्थित करता है।

के बीच व्यवहार में मुख्य अंतर है vertical-align: middleऔर topयह है कि पहले बॉक्स के आधार रेखा के सापेक्ष तत्वों को स्थानांतरित करता है (जो कि सभी ऊर्ध्वाधर संरेखण को पूरा करने के लिए जहां भी आवश्यक हो और इस तरह अप्रत्याशित लगता है ) और दूसरा लाइन बॉक्स के बाहरी सीमा के सापेक्ष (जो अधिक मूर्त)।

Comments

मैंने शीर्ष कार्यों और नीचे के कार्यों पर ध्यान दिया, लेकिन मध्य में नहीं। मूल रूप से "मध्य" को ऊपर और नीचे के बीच आधे रास्ते के रूप में परिभाषित नहीं किया गया है। इसका मतलब है "जब यह पाठ से लंबा होता है, तो दोनों तरीकों को समान रूप से चिपकाएं।" और यहाँ आपको वर्टिकल-अलाइन की जरूरत नहीं है: टेक्स्ट पर बिल्कुल बीच में, सिर्फ इमेज पर।

— कर्टिस

Answer 5

स्वीकृत उत्तर में प्रयुक्त तकनीक केवल एकल-पंक्ति वाले पाठ ( डेमो ) के लिए काम करती है , लेकिन बहु-पंक्ति पाठ ( डेमो ) के रूप में नहीं - जैसा कि वहां उल्लेख किया गया है।

अगर किसी को किसी छवि के लिए बहु-पंक्ति पाठ को लंबवत करने की आवश्यकता है, तो यहां कुछ तरीके हैं ( इस सीएसएस-ट्रिक्स लेख से प्रेरित तरीके 1 और 2 )

विधि # 1: CSS तालिकाओं ( FIDDLE ) (IE8 + ( caniuse ))

सीएसएस:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

विधि # 2: कंटेनर पर छद्म तत्व ( FIDDLE ) (IE8 +)

सीएसएस:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

विधि # 3: फ्लेक्सबॉक्स ( FIDDLE ) ( कैनीयूज़ )

सीएसएस (उपरोक्त फिडेल में वेंडर उपसर्ग शामिल हैं):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

Comments

यदि पाठ की तुलना में छवि बड़ी (ऊंचाई में) है, तो तरीके ठीक काम करते हैं। लेकिन अगर छवि छोटी है, लेकिन सभी अंतिम रूप से दुखी हैं

— थॉमस

Answer 6

यह कोड IE के साथ-साथ FF में भी काम करता है:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

Answer 7

क्योंकि आपको line-heightकाम करने के लिए div की ऊंचाई निर्धारित करनी होगी

Comments

मैं 30px के लिए लाइन ऊंचाई की कोशिश की और यह अभी भी काम नहीं करता है।

— सैम

Answer 8

असल में, आपको CSS3 के लिए नीचे उतरना होगा।

-moz-box-align: center;
-webkit-box-align: center;

Answer 9

रिकॉर्ड के लिए, संरेखण "कमांड" एक स्पैन पर काम नहीं करना चाहिए, क्योंकि यह एक इन-लाइन टैग है, न कि ब्लॉक-स्तरीय टैग। संरेखण, मार्जिन, पैडिंग, आदि जैसी चीजें इन-लाइन टैग पर काम नहीं करेंगी क्योंकि इनलाइन का बिंदु पाठ प्रवाह को बाधित नहीं करना है।

CSS HTML टैग्स को दो समूहों में विभाजित करता है: इन-लाइन और ब्लॉक-लेवल। "सीएसएस ब्लॉक बनाम इनलाइन" खोजें और एक महान लेख दिखाता है ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(कोर सीएसएस सिद्धांतों को समझना एक महत्वपूर्ण है क्योंकि यह बहुत कष्टप्रद नहीं है)

Comments

text-alignऔर vertical-align(पर अपने आवेदन के अपवाद के साथ tdविरासत प्रयोजनों के लिए तत्वों) विशेष रूप से के लिए हैं inlineऔर inline-blockतत्वों ( span, img, आदि)।

— केविन पेनो

Answer 10

line-height:30pxस्पैन के लिए उपयोग करें ताकि टेक्स्ट छवि के साथ संरेखित हो:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Answer 11

एक और चीज जो आप कर सकते हैं वह है पाठ की line-heightछवियों के आकार के भीतर सेट करना <div>। फिर छवियों को सेट करेंvertical-align: middle;

यह गंभीरता से सबसे आसान तरीका है।

Comments

ध्यान दें कि यह सही ढंग से काम नहीं करता है यदि आपकी सामग्री कई लाइनों में फैली हुई है।

— अहमद अल्फी

और फिर लाइन-ऊंचाई क्यों नहीं: 100%?

— बजे जीन पॉल AKA el_vete

Answer 12

marginअभी तक इनमें से किसी भी उत्तर के साथ एक समाधान नहीं देखा गया है , इसलिए यहां इस समस्या का समाधान है।

यह समाधान केवल तभी काम करता है जब आप अपनी छवि की चौड़ाई जानते हैं।

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

सीएसएस

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

Comments

यहाँ सटीक समाधान है। यह मल्टी-लाइन ग्रंथों के लिए भी काम करता है, ... एबोव्स मल्टी लाइनों के लिए उचित नहीं हैं।

— efirat

Answer 13

background:url(../images/red_bullet.jpg) left 3px no-repeat;

मैं आमतौर पर के स्थान पर 3 पीएक्स का उपयोग करता हूं top। उस मान को बढ़ा / घटाकर, छवि को आवश्यक ऊँचाई में बदला जा सकता है।

Comments

उन स्थितियों में मदद नहीं करता जहां छवि का आकार अज्ञात या गतिशील है।

— दान

Answer 14

इन स्पैन प्रॉपर्टीज को लिखें

span{
    display:inline-block;
    vertical-align:middle;
}

display:inline-block;जब आप vertical-alignप्रॉपर्टी का उपयोग करते हैं तो उपयोग करें। यह गुण गुण हैं

Answer 15

आप संपत्ति inline elementका उपयोग करके छवि सेट कर सकते displayहैं

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Answer 16

उदाहरण के लिए, jQuery के मोबाइल के एक बटन पर, आप इस शैली को छवि पर लागू करके इसे थोड़ा मोड़ सकते हैं:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Answer 17

बहुस्तरीय समाधान:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

सभी ब्राउज़रों और यानी 9 में काम करता है

Answer 18

यह भ्रामक हो सकता है, मैं सहमत हूं। तालिका सुविधाओं का उपयोग करने का प्रयास करें। मैं इस सरल सीएसएस ट्रिक का उपयोग वेबपेज के केंद्र में स्थित मॉडल्स को करने के लिए करता हूं। इसमें बड़े ब्राउज़र का समर्थन है:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

और सीएसएस हिस्सा:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

ध्यान दें कि आपको अपनी इच्छानुसार काम करने के लिए छवि और टेबल कंटेनर के आकार को समायोजित करना होगा। का आनंद लें।

Answer 19

सबसे पहले इनलाइन सीएसएस की सिफारिश नहीं की जाती है, यह वास्तव में आपके HTML को गड़बड़ कर देता है।

छवि और अवधि संरेखित करने के लिए, आप बस कर सकते हैं vertical-align:middle।

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Comments

इनलाइन CSS का उपयोग करने के कई अच्छे कारण हैं। प्रतिक्रिया: उदाहरण के लिए JS में CSS ।

— ज्‍लॉन्‍समिथ

Answer 20

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

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Answer 21

आप शायद यही चाहते हैं:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

जैसा कि दूसरों ने सुझाव दिया है, vertical-alignछवि पर प्रयास करें:

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

सीएसएस कष्टप्रद नहीं है। आप अभी प्रलेखन नहीं पढ़ते हैं । ; P

Comments

और अगर छवि ऊंचाई गतिशील है? मैं खराब हो गया हूं :( PS, सिर्फ इसलिए कि डॉक्यूमेंटेशन CSS के लिए मौजूद है, इससे वह परेशान या अनभिज्ञ नहीं है।

— sam

क्या आपका मतलब अघोषित और सहज है? आपने यह निर्दिष्ट नहीं किया है कि आपके प्रश्न में उसकी छवि की ऊँचाई सभी पर गतिशील है, इसलिए मैंने यह निश्चित किया कि आप जिस ऊंचाई पर जा रहे हैं, वह क्या है।

— स्ट्रैजन

मैं इस एक पर सैम के साथ हूँ। मुझे लगता है कि जो भी img ऊंचाई के साथ निकला होना चाहिए के साथ केंद्रित होना चाहिए आइटम नहीं है। मुझे लगता है कि हम सभी थोड़ा शांत हो सकते हैं।

— माइकल हरेन