क्षैतिज <ul> नेविगेशन - <li> की ऊर्ध्वाधर संरेखित सामग्री कैसे करें - html, css, ऊर्ध्वाधर-संरेखण, संरेखण

मेरे पास एक क्षैतिज है <ul> सीएसएस के साथ स्टाइल। अच्छा काम करता है, रोलओवर करता है सब कुछ, हालांकि, सूची में 50px की ऊंचाई है और मुझे ऊर्ध्वाधर मध्य में लिंक में स्थिति की आवश्यकता है। किसी कारण के लिए, मैं "यह कैसे करना है पता लगा सकते हैं ...

प्रासंगिक कोड यहां है: http://jsfiddle.net/XPFMB/

"Ssss" लिंक को ग्रे बार के मध्य में कैसे जाना है?

उत्तर:

जोड़ना line-height: 50px; अपने सीएसएस के लिए .nav ul li a

में लाइन-ऊंचाई जोड़ें li"सीएसएस:

.nav li {
margin: 0px;
float: left;
line-height: 50px;
}

जेएस फिल्ड डेमो.

इस मर्जी यदि आपका पाठ दूसरी पंक्ति में चलने के लिए पर्याप्त लंबा है, तो समस्याएँ उत्पन्न करें; हालाँकि इसके लिए आपको ध्यान देना चाहिए सकता है उपयोग min-width (के बजाय width) पर a तत्वों, और फिर जोड़ें white-space: nowrap दोनों के लिए ul तथा the li:

.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
vertical-align: middle;
white-space: nowrap;
}
.nav li {
margin: 0px;
float: left;
line-height: 50px;
white-space: nowrap;
}

जेएस फिल्ड डेमो.

यह ' s अभी भी सही नहीं है; लेकिन यह लिंक-पाठ कुछ वर्णों को बहुत लंबा उपयोग करके लेआउट को तोड़ने की संभावना को कम करता है ।