लाइन-ऊंचाई लंबवत केंद्र टेक्स्ट कैसे करता है?

Question

मुझे समझ में क्यों line-height सीएसएस संपत्ति इस बटन के बीच में खड़ी पाठ देता है कोशिश कर रहा हूँ:

.btn-order { 
 
    width: 220px; 
 
    height: 58px; 
 
    font-size: 24px; 
 
    padding: 0; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 58px; 
 
    border: 1px solid black; 
 
}

<div class="btn-order">Complete Order</div>

Answer 1

यह डिजाइन कर रहा है। यदि सीएसएस पार्सर (यानी ब्राउजर) नहीं जानता है कि आपका टेक्स्ट कितना लंबा है, तो वह आपके टेक्स्ट को लंबवत रूप से संरेखित नहीं कर सकता है।

नोट line-height संपत्ति का डिफ़ॉल्ट मान है।

Answer 2

रेखा-ऊंचाई टेक्स्ट की ऊंचाई को परिभाषित करती है जो पैराग्राफ को साफ दिखता है ताकि रेखा ऊंचाई के संबंध में ऊर्ध्वाधर-संरेखण कार्य हो, जब आप ऊंचाई ऊंचाई बढ़ाते हैं तो ऊंचाई बढ़ जाती है और आप लंबवत के प्रभावों को और अधिक स्पष्ट रूप से देख सकते हैं पाठ की -alignment

एक नोटबुक है जो हम बच्चों

Answer 3

line-height संपत्ति अनिवार्य रूप से ऊपर एक 29px(29 + 29 = 58) पाठ लाइन स्थापित कर रही है नर्सरी कक्षा में अंग्रेजी -writing जानने के लिए उपयोग करने के रूप में इस बारे में सोच और अपने पाठ के नीचे, "पूर्ण आदेश"। यदि आपने नीचे टेक्स्ट की एक और पंक्ति जोड़ दी है तो आपको इस पाठ के नीचे 58px मिलेगा। आप केवल मध्य में अपने पाठ को केंद्रित करने के लिए लाइन-ऊंचाई डाल रहे हैं।

यहाँ आप इस अवधारणा को और अधिक समझने में मदद करने के लिए एक अच्छा स्लाइड शो line-height

यहाँ है ... और के अपने कोड का उपयोग एक उदाहरण है कि मैं क्या बात कर रहा हूँ: http://jsfiddle.net/YawDF/14/

line-height करने की स्थापना करके 58px आप ब्राउजर को टेक्स्ट लाइन के ऊपर और नीचे आधा छोड़ने के लिए कह रहे हैं, प्रत्येक पंक्ति के बीच '58 पीएक्स' अंतर और पहली पंक्ति के ऊपर केवल '2 9 पीएक्स' अंतर बनाते हैं।

साइड नोट: vertical-align: middle का उपयोग आपके द्वारा दिखाए जा रहे कोड में बेकार है। यह सब एक साथ बाहर ले जाया जा सकता है।

Answer 4

The text you generate is inside its own line box और लंबवत-संरेखण उस बॉक्स के अंदर प्लेसमेंट के लिए उपयोग किया जाता है। हालांकि, उस बॉक्स के पास पाठ के चारों ओर लिपटे div के साथ कुछ लेना देना नहीं है। आप div की ऊंचाई 58px पर सेट करते हैं लेकिन इससे लाइन टेक्स्ट बॉक्स की ऊंचाई प्रभावित नहीं होती है। यही कारण है कि आपको div की ऊंचाई से मेल खाने के लिए लाइन-ऊंचाई की आवश्यकता है।

Answer 5

जब भी किसी विभाजन में अनुच्छेद डाला जाता है तो पहली पंक्ति के बीच की दूरी और div की शीर्ष सीमा रेखा-ऊंचाई का आधा होता है यानी यदि डिफ़ॉल्ट रेखा-ऊंचाई 1px है तो पहली पंक्ति के बीच की दूरी और div की शीर्ष सीमा 0.5px है।

यदि आपके पास height:58px के साथ एक विभाजन है तो रेखा के बीच की दूरी और div की शीर्ष सीमा 2 9 पीएक्स है और रेखा के बीच की दूरी और नीचे div की सीमा होगी = (कुल div ऊंचाई-दूरी बी/डब्ल्यू लाइन और शीर्ष सीमा) जो 58 पीएक्स -29 पीएक्स = 2 9 पीएक्स है। इसका परिणाम केंद्र में लंबवत रूप से गठबंधन किया जा रहा है।

इसके अलावा, vertical align:middle (टेक्स्ट के लिए एक से अधिक पंक्ति वाले पाठ के लिए) का उपयोग करने की आवश्यकता नहीं है, यदि आप पाठ को केंद्रीय रूप से संरेखित करने के लिए लाइन-ऊंचाई का उपयोग कर रहे हैं।