मैं एलआई के भीतर, एंकर में पाठ को लंबवत रूप से केंद्रित करने के लिए सीएसएस का उपयोग कैसे कर सकता हूं?

Question

इस प्रश्न पर विविधताएं कई बार पूछे गए हैं। सीएसएस के साथ लंबवत केंद्र एक चुनौती है।

मेरे पास एक विशेष परिदृश्य है, जो क्षैतिज रूप से प्रदर्शित सूची से निपट रहा है। मार्कअप इस तरह है:

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul> 

शैली इस तरह है:

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    } 

जिसके परिणामस्वरूप सूची इस प्रकार है:

लेकिन मैं सभी बक्से होना चाहता हूँ एक ही ऊंचाई, और मैं चाहता हूं कि पाठ प्रत्येक बॉक्स में लंबवत केंद्रित हो। मैं ए तत्वों के लिए height शैली जोड़कर बॉक्स-ऊंचाई सेट कर सकता हूं। परिणाम इस प्रकार है:

... जो मैं चाहता के करीब है, लेकिन खड़ी केंद्रित नहीं हो रहा है।

मैं ऊर्ध्वाधर केंद्रिंग करने के लिए as suggested in this post टेक्स्ट के लिए line-height सेट कर सकता हूं। मैं अलग-अलग तत्वों के लिए line-height के विभिन्न मान भी चुन सकता हूं, अगर मुझे पता है कि कौन से तत्व टेक्स्ट की कई पंक्तियां प्राप्त करेंगे। लेकिन मुझे नहीं पता कि किन लोगों को कई लाइनों की आवश्यकता होगी।

मैं इसे कैसे प्राप्त कर सकता हूं जब कुछ तत्वों में टेक्स्ट होता है जो लपेटता है?

Answer 1

आप display:table, आदि इस्तेमाल कर सकते हैं साथ साथ vertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
} 

उदाहरण:http://jsfiddle.net/kf52n/2/

Answer 2

मैं सीएसएस में ऐसा करने का कोई तरीका नहीं ढूंढ सका। मैंने पाया कि मैं जावास्क्रिप्ट के साथ की आवश्यकता थी, जो रनटाइम पर उपयुक्त मानों के लिए padding-top और padding-bottom सेट कर सकता था। तकनीक ए तत्व की "प्राकृतिक" ऊंचाई को मापने के लिए है, फिर पैडिंग सेट करें ताकि एक तत्व लंबवत केंद्रित हो।

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    } 

सीएसएस में, एक स्पष्ट रूप से एक तत्व के लिए ऊंचाई या गद्दी सेट नहीं करना चाहिए:

यहाँ आवश्यक js कोड है। ऐसा करने से "प्राकृतिक" ऊंचाई न हो जो हमें चाहिए।

परिणाम इस तरह है:

कार्रवाई में यह देखने के लिए, go here।

Answer 3

सीएसएस आप एक ही करने के लिए ऊंचाई line-height की स्थापना की है में

। फिर आपको एक आयताकार बॉक्स मिलेगा।ऊपर से नीचे;:

लेकिन फिर भी आप तल में अंतरिक्ष को देख रहे हैं कारण गद्दी

गद्दी में दो मानों को जोड़ने की वजह से है ऊपर और नीचे गद्दी

गद्दी कहते हैं

क्योंकि यह 2 और 12 है, आप विशाल स्थान देख रहे हैं।

इस

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center; 

मुझे पता है कि यह

Answer 4

पुराने प्रश्न काम कर रहा है यह बताने की कोशिश, लेकिन इस सवाल का जवाब अब flexbox के साथ अद्यतन किया जा सकता है।

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}