नेविबार में टेक्स्ट को लंबवत रूप से संरेखित करना

Question

मैं अपने navbar में कुछ पाठ स्थानांतरित करने के लिए <span> का उपयोग करने का प्रयास कर रहा हूं। मेरा navbar एक <ul> है और तत्व सभी <li> एस हैं लेकिन पाठ को navbar के शीर्ष पर गठबंधन किया गया है और मैं इसे लंबवत केंद्रित करना चाहता हूं। जैसा कि आप जेएसफ़िडल में देख सकते हैं, मैं एक ए: होवर प्रॉपर्टी का उपयोग कर रहा हूं ताकि पाठ के पृष्ठभूमि और रंग को बदल दिया जा सके। जब मैं केवल पाठ के लिए अवधि लागू करता हूं, तो पूरे होवरिंग सेक्शन भी स्थानांतरित हो जाता है। देखें कि क्या आप समझ सकते हैं कि मेरा क्या मतलब है।

मेरे JSFiddle यहाँ है:

http://jsfiddle.net/G8CJ7/

असल में मैं सिर्फ पाठ खड़ी एक सरल, संक्षिप्त तरीके से गठबंधन चाहते हैं। मूल रूप से मैं 'टैग का उपयोग कर रहा था और उन पर मार्जिन सेट कर रहा था लेकिन मैं बेहतर एसईओ के लिए इस उद्देश्य के लिए हेडर टैग का उपयोग करना चाहता हूं। धन्यवाद।

Answer 1

एक जोड़ी साल बाद इस अद्यतन कर रहा है लेकिन वहाँ हमेशा उपयोग करने का विकल्प है:

display:table; 
display:table-row; 
display:table-cell; 

ऊर्ध्वाधर- align साथ

: मध्यम; वस्तुओं को केन्द्रित करने के लिए। मैं इन दिनों इस दृष्टिकोण को प्राथमिकता देता हूं क्योंकि आप प्रदर्शन शैली में उत्तरदायी नियम लागू कर सकते हैं (उदाहरण के लिए, इसे प्रदर्शित करने के लिए बदलें: ब्लॉक और डिस्प्ले: इनलाइन-ब्लॉक इत्यादि। यदि आपको अन्य स्क्रीन आकारों के लिए इसे अपडेट करने की आवश्यकता है। यहां एक पहेली है:

http://jsfiddle.net/G8CJ7/68/

Answer 2

http://jsfiddle.net/G8CJ7/1/

जोड़ा गया line-height: 40px पाठ खड़ी केंद्रित करने के लिए। आईई 7 में इसके साथ समस्याएं होंगी क्योंकि यह पूरी तरह से समर्थित नहीं है, इसलिए ली पर पैडिंग-टॉप के साथ एक सशर्त स्टाइलशीट इसे हल करेगी।

Answer 3

शीर्ष करने के लिए गद्दी जोड़ने सकता है जोड़ा जा रहा है लाइन ऊंचाई से काम करता है, तो आप भी:

.class { padding-top: 10px; } 

केंद्र के लिए गद्दी को समायोजित करें।