प्रतिशत ऊंचाई के साथ एक तत्व के अंदर पाठ को लंबवत रूप से संरेखित करें?

Question

जैसा कि मेरे पास प्रतिशत ऊंचाई वाला तत्व है, मैं लाइन-ऊंचाई हैक का उपयोग नहीं कर सकता। क्या किसी को इसका समाधान करने के बारे में कोई विचार है?

<div height="100%"> 
    I want to be vertically aligned in the middle 
</div> 

Answer 1

यहाँ तुम क्या चाहते हो: http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

आप div की ऊंचाई मूल्य है, तो सेट line-height सेट करने के लिए: value_of_div_height। लाइन-ऊंचाई 100% काम नहीं करेगी क्योंकि यह पाठ का मूल्य लेगी, न कि div तत्व। यह रूप में लंबे समय ऊंचाई = line-height के रूप में के साथ या ऊर्ध्वाधर- align बिना काम करता है,

div { 
    height: 200px; 
    line-height: 200px; 
    display: block; 
} 

वैकल्पिक विधि आप एक div तत्व के अंदर एक पैरा के साथ क्या करना चाहते हैं: http://www.w3.org/Style/Examples/007/center

DIV.container { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle } 
... 
<DIV class="container"> 
    <P>This small paragraph... 
</DIV> 

Answer 3

आप सेट करते हैं फ़ॉन्ट आकार, और आप अपने पास पाठ की पंक्तियों की संख्या जानते हैं। आप पाठ को एक अवधि में लपेट सकते हैं। और अवधि पर निम्नलिखित सीएसएस का उपयोग करें।

span { 
    font-size:20px; 
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2) 
    position: relative; 
    top: 50%; 
}