सीएसएस में वर्टिकल-एलाइन का उपयोग क्या होता है?

Question

मैं कोडिंग के साथ-साथ सीएसएस की दुनिया में नया हूं और हाल ही में संपत्ति लंबवत-संरेखण में आया हूं। इस पर कई लेखों को पढ़ने के बाद, मैं अभी भी इस बात पर अनजान हूं कि इसके लिए क्या है और आप इसका उपयोग कब करते हैं?

मेरी समझ यह है कि इसका उपयोग टेक्स्ट, छवियों, आदि के साथ-साथ टेक्स्ट या अन्य इनलाइन तत्वों जैसे इनलाइन तत्वों के लिए किया जाता है। इन्हें ब्लॉक तत्व जैसे div, h1, आदि के लिए उपयोग नहीं किया जा सकता है

यदि मेरी समझ सही है, तो छवि को कहने के लिए लंबवत पाठ को संरेखित करने या सबस्क्रिप्ट या सुपरस्क्रिप्ट का उपयोग करने के अलावा, यह अन्य उद्देश्य क्या करता है?

Answer 1

• यह हमेशा चश्मा पढ़ने लायक है यदि आप किसी विशिष्ट संपत्ति के बारे में सीखना चाहते हैं:
  http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

• का उपयोग आम तौर (संयोजन में display: table-cell के साथ) केंद्रित खड़ी है:

  http://jsfiddle.net/7eTb2/

  div { 
      background: #ccc; 
      width: 200px; 
      height: 300px; 
      padding: 5px; 
  
      display: table-cell; 
      vertical-align: middle 
  } 
  

  यह कुछ हद तक भिन्न है इस तकनीक का उपयोग किए बिना लंबवत केंद्र के लिए icult।

• एक और आम उपयोग केस तब होता है जब inline या inline-block तत्वों की बात आती है।
  क्या अलग vertical-align मूल्यों के साथ होता है के उदाहरण के लिए यहाँ देखें: http://www.brunildo.org/test/inline-block.html

• एक और अच्छा लिंक को पढ़ने के लिए: http://css-tricks.com/what-is-vertical-align/

हालांकि, यह वास्तविक उपयोग मुझे upvotes हो रही है है, देखें:

• https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

:)

Answer 2

वर्टिकल संरेखण बस ऐसा लगता है कि यह कैसा लगता है। यह मूल वस्तु के भीतर लंबवत तत्व को संरेखित करता है; हालांकि, सभी ब्राउज़रों ने इसकी व्याख्या नहीं की है।

Here's उपलब्ध पैरामीटर मानों पर थोड़ी अधिक गहन जानकारी।

Answer 3

यह वास्तव में ऊर्ध्वाधर इनलाइन तत्वों का उपयोग किया जाता है। ब्लॉक स्तर तत्व इस संपत्ति को अनदेखा करेंगे। तो आपकी समझ सही है।

This blog कुछ उदाहरणों के साथ लंबवत-संरेखण पर कुछ पृष्ठभूमि जानकारी देता है। यह मुख्य रूप से पाठ की एक पंक्ति में एक छवि को लंबवत स्थिति में उपयोग करने के लिए प्रयोग किया जाता है। या tablecells पर valign विशेषता को प्रतिस्थापित करने के लिए।

तो ऐसा लगता है कि आप इसे काफी सही समझ रहे हैं। ऊर्ध्वाधर-संरेखण संपत्ति के विवरण के लिए w3schools देखें।

बस स्पष्ट होना; एक divle जैसे तत्व ब्लॉक करने के लिए लंबवत-संरेखण का उपयोग करने की कोशिश मत करो। जैसा कि आपने पहले ही उल्लेख किया है, यह काम नहीं करेगा, यह टेक्स्ट की एक पंक्ति में छवियों जैसे इनलाइन तत्वों के लिए है। display: table-cell; का उपयोग करना और तत्व पर लंबवत-संरेखण एक हैक है, कृपया जब भी संभव हो, एक div में सामग्री को लंबवत रूप से संरेखित करने के लिए अन्य सीएसएस तकनीकों का उपयोग करें।

Answer 4

खड़ी संरेखित, W3C द्वारा और कैसे सबसे (टीएम) व्याख्या से, केवल प्रयोग किया जाता है/तत्वों कि टेबल कोशिकाओं (<td>) कर रहे हैं में प्रभावित कर लेता है, और कुछ ब्राउज़रों पर, तत्वों display: table-cell घोषणा के साथ।

बाकी समय, यह ब्राउज़र द्वारा बड़े पैमाने पर उपेक्षा किया जाता है।

Answer 5

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

इस मामले में, एक पहेली एक हजार शब्द के लायक है। :)

http://jsfiddle.net/JJfuj/