ऊर्ध्वाधर- align:</p> <p><img src="https://i.stack.imgur.com/Yru7c.png" alt="layout"></p> <p><strong>मेरे सीएसएस</strong>: बटन

Question

में पाठ के लिए बीच मैं इस लेआउट

body { 
    background: #e2eaed; 
} 
a { 
    text-decoration: none; 
    color: #fff; 
    font-size: 30px; 
    height: 62px; 
    line-height: 62px; 
    /* vertical-align: middle is not works */ 
    background: #8dc73f; 
    width: 132px; 
    padding: 0 25px; 
    font-size: 16px; 
    text-align: center; 
    font-weight: bold; 
    margin-left: 4px; 
    display: block; 
    float: left; 
} 

बटन 1-लाइन पाठ, मेरे कोड काम करता है जब कुंआ। लेकिन जब बटन में 2-पंक्ति टेक्स्ट होता है, जैसे ऊपर की छवि में। कोड टेक्स्ट की बड़ी ऊंचाई है, क्योंकि मैं line-height संपत्ति का उपयोग करता हूं। मैंने vertical-align की कोशिश की है लेकिन यह काम नहीं कर रहा है।

कृपया, jsfiddle देखें।

Answer 1

वर्टिकल संरेखण केवल उन तत्वों को प्रभावित करता है जो तालिका कक्ष (या इनलाइन ब्लॉक के रूप में प्रदर्शित होते हैं, लेकिन बाद में प्रभाव अलग है)। उन तत्वों को तैरना नहीं चाहिए।

a { 
    display: table-cell; 
    vertical-align: middle; 

    /* Reset */ 
    float: none; 
    line-height: normal; 
} 

Answer 2

एक अन्य विधि flexible boxes का उपयोग करेंगे:

a { 
    display: inline-flex; 
    align-items: center; /* cross axis */ 
    justify-content: center; /* main axis */ 

    line-height: 1; /* reset */ 
} 

आप उपसर्गों को जोड़ने के लिए, browser support और fiddle देखना पड़ सकता है।