css - एक छवि के बगल में पाठ को लंबवत रूप से संरेखित करें?




vertical-alignment (14)

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

div {display:flex;}


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

विधि 1:

div {align-items:center;}

DEMO

विधि 2:

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

DEMO

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

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

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

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

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

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

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


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

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

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

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

सीएसएस परेशान नहीं है। आप सिर्फ दस्तावेज नहीं पढ़ते हैं। ; P


इन अवधि गुणों को लिखें

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

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


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

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

एचटीएमएल

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

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

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


क्योंकि आपको काम करने के लिए div की line-height पर line-height सेट करना होगा


यह कोड आईई के साथ ही एफएफ में काम करता है:

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

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

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

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


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

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

यह आसान है: कंटेनर के बराबर पाठ तत्व की रेखा-ऊंचाई सेट करें

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

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

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

<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 का उपयोग करता है transform: translateY संपत्ति। ( http://caniuse.com/#feat=transforms2d )

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

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

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

छवि और अवधि को संरेखित करने के लिए, आप केवल vertical-align:middle कर सकते हैं 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>


line-height:30px उपयोग करें line-height:30px अवधि के लिए line-height:30px ताकि पाठ छवि के साथ संरेखित हो:

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

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

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





vertical-alignment