खड़ी सीएसएस के साथ <a> तत्व में पाठ संरेखित

Question

कोई व्याख्या कर सकते हैं कि कैसे मैं खड़ी <a> तत्वों में पाठ संरेखित - तो दोनों पाठ लाल बॉक्स के बीच में दिखाई देता है?

<ul> 
<li><a href="#">this is a link</a></li> 
<li><a href="#">this is an even longer link</a></li> 
</ul> 

और मेरे सीएसएस:

http://jsfiddle.net/WeKtX/

यहाँ मेरी एचटीएमएल है

li {list-style-type:none;margin:0;padding:0} 
li a {width:100px;float:left;background:red;margin-right:20px;height:40px} 

किसी भी संकेत दिए गए के लिए बहुत-बहुत धन्यवाद

Answer 1

आप क्षैतिज पाठ केंद्रित करने के लिए चाहते हैं तो प्रयास करें:

text-align: center; 

तुम कोशिश तो खड़ी पाठ केंद्रित करने के लिए करना चाहते हैं:

line-height: 40px; //Where 40px is the height of your parent element 

ध्यान रखें, कि line-height का उपयोग करते समय, यह केवल पर एक पंक्ति टेक्स्ट पर काम करें। यदि आप टेक्स्ट की कई पंक्तियां करना चाहते हैं तो मुझे डर है कि आपको टेक्स्ट की ऊंचाई निर्दिष्ट करनी होगी और फिर position: absolute; का उपयोग मूल तत्व पर position: relative; के साथ टेक्स्ट पर करें।

li { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: relative; 
    height: 60px; 
    width: 200px; 
    display: block; 
    background:red; 
} 

li a { 
    width:100px; 
    height:40px; 
    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
}