मूल तत्व

Question

से संबंधित प्रतिशत के रूप में लाइन-ऊंचाई सेट करें मेरे पास एक उत्तरदायी तत्व है जहां इसकी चौड़ाई और ऊंचाई दोनों पैमाने पर होगी। इसके अंदर मेरे पास कुछ पाठ है जो मैं लंबवत रूप से केंद्र बनाना चाहता हूं।

यदि मैं अभिभावक की ऊंचाई को नहीं जानता तो मैं पाठ के line-height को अपने माता-पिता के समान कैसे सेट कर सकता हूं?

line-height: 100% फॉन्ट की नियमित ऊंचाई के सापेक्ष तो यह मदद नहीं करता है ...

Answer 1

यहां एक तत्व को लंबवत रूप से केंद्रित करने का एक और तरीका है। मैं कुछ समय पहले this technique में आया था। असल में यह एक छद्म तत्व और लंबवत-संरेखण का उपयोग करता है: मध्य।

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
    also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 

Answer 2

मैं एक तत्व है, जिनमें से आप जानते हैं (या सेट) आकार के अंदर का पाठ डालने की कोशिश होगी। फिर इसके लिए सापेक्ष स्थिति निर्धारण, शीर्ष, बाएं 50% और नकारात्मक बाएं और दाएं मार्जिन सेट करें।

See this Fiddle

केवल समस्या यह है कि इस एक ज्ञात/निश्चित TextBlock पर निर्भर करता है। यदि पाठ परिवर्तनीय है, तो मुझे डर है कि आपको जावास्क्रिप्ट का उपयोग करना होगा ..

Answer 3

के बारे में हाइपरलिंक:

मैं मुख्य मेनू में लिंक के बारे में इस समस्या हो रही थी। और चूंकि यह <a><li> टैग में था, इसलिए मुझे क्लिक करने योग्य/स्पर्श करने योग्य लिंक के लिए कुछ सतह की आवश्यकता थी (touch target size देखें)। तो मैंने <ul> के लिए क्या किया था, मैंने एक निश्चित ऊंचाई निर्धारित की है (इस मामले में इसके माता-पिता के माध्यम से), <li> -s इसका प्रतिशत है और <a>-उनके पास एक न्यूनतम ऊंचाई और रेखा-ऊंचाई गुण सेट हैं और शीर्ष सेट करने के लिए वहां से आसान है। कोड:

.menu-header-main-container{ 
position: fixed; 
top: 0; 
bottom: 160px; 
}  
.menu-header-main-container ul.menu { 
      height: 100%; } 
      .menu-header-main-container ul.menu li { 
      height: 33.33%; 
      max-height: 110px; } 
      .menu-header-main-container ul.menu li a { 
       line-height: 40px; 
       min-height: 40px; 
       top: calc(50% - 20px); 
       position: relative; } }