पाठ के 2 विभिन्न आकारों को लंबवत रूप से कैसे संरेखित करें?

Question

मैं एक खंड के मध्य में लंबवत रूप से संरेखित करना जानता हूं, आपने पंक्ति को ऊंचाई के समान ऊंचाई पर सेट किया।

हालांकि, अगर मुझे बीच में एक शब्द के साथ एक वाक्य है, वह है 2em। यदि पूरे वाक्य में एक पंक्ति-ऊंचाई है जिसमें युक्त ब्लॉक है, तो बड़ा पाठ लंबवत रूप से संरेखित है लेकिन छोटा पाठ एक ही आधार रेखा पर बड़ा पाठ है।

मैं इसे कैसे सेट कर सकता हूं इसलिए पाठ के दोनों आकार लंबवत रूप से संरेखित हैं, इसलिए बड़ा पाठ छोटे पाठ की तुलना में कम आधार रेखा पर होगा?

Answer 1

vertical-align:middle;इनलाइन कंटेनरों पर प्रयास करें ?

संपादित करें: यह काम करता है लेकिन आपके सभी पाठ इनलाइन कंटेनर में होने चाहिए, जैसे:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Comments

और मैं हमेशा सोचा vertical-align: middleथा कि table-cellकेवल के लिए था !

— बजे रॉबिन वैन बालन

यह विफल होता है अगर मैं चाहता हूं कि दूसरा स्पैन सही फ्लोट किया जाए। फिर इसके शीर्ष पर संरेखित करें: jsfiddle किसी भी विचार यह कैसे फ्लोट के साथ काम करने के लिए?

— philk

क्या पैरेंट डिव की ऊंचाई और रेखा-ऊंचाई शैलियों को सेट करना आवश्यक है?

— lexeek

Answer 2

आपके द्वारा देखी जा रही कार्यक्षमता सही है क्योंकि "वर्टिकल-एलाइन" के लिए डिफ़ॉल्ट आधारभूत है। ऐसा प्रतीत होता है कि आप चाहते हैं vertical-align:top। अन्य विकल्प हैं। W3Schools पर यहाँ देखें ।

संपादित करें W3Schools ने अपने कार्य को साफ नहीं किया है और फिर भी, प्रकट होता है, जानकारी का एक घटिया (सर्वोत्तम) स्रोत है। मैं अब साइटपॉइंट का उपयोग करता हूं । उनके संदर्भ अनुभागों तक पहुंचने के लिए साइट पॉइंट फ्रंट पेज के नीचे स्क्रॉल करें।

Comments

मैंने तब से सीखा है कि W3Schools एक अच्छी संदर्भ साइट नहीं है। अधिक जानकारी के लिए w3fools.com देखें ।

— ड्वाब

+1 इस निष्कर्ष पर आने के लिए एक उत्थान है कि W3S कबाड़ का एक टुकड़ा है।

— एफएक्सएक्सएक्स

Answer 3

पाठ के दो सेट में एक ही निश्चित रेखा-ऊंचाई और ऊर्ध्वाधर-संरेखित सेट होना चाहिए

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Answer 4

आप तकनीकी रूप से, हालांकि, यदि आपने निश्चित पाठ आकार निर्धारित किए हैं, तो आप बड़े टेक्स्ट को नीचे ले जाने के लिए पोजिशनिंग (सापेक्ष) का उपयोग कर सकते हैं और छोटे पाठ के लिए लाइन-ऊँचाई सेट कर सकते हैं (मैं मान रहा हूँ कि यह बड़ा पाठ इस तरह चिह्नित है इसलिए आप इसे सीएसएस चयनकर्ता के रूप में उपयोग कर सकते हैं)

Answer 5

माता-पिता के पुन: आवेदन के लिए आप प्रतिशत आकारों का उपयोग कर सकते हैं line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Answer 6

आसान तरीका - फ्लेक्स का उपयोग करें:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

Answer 7

एक विकल्प एक तालिका का उपयोग करना है जहां विभिन्न आकार के ग्रंथ अपनी कोशिकाओं में हैं और प्रत्येक सेल पर मध्य: संरेखित करें।

यह सुंदर नहीं है और सभी अवसरों के लिए काम नहीं करता है, लेकिन यह सरल है और किसी भी पाठ के आकार के साथ काम करता है।

Comments

मैं फिर से लेआउट के लिए एक तालिका का उपयोग करने से पहले हार स्वीकार करूंगा।

— जेडी इसाक्स

Answer 8

यह काम

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>