एक इनलाइन-ब्लॉक एंकर टैग पर वर्टिकल संरेखित

Question

मुझे अपने लिंक और बटन देखने की आवश्यकता है, लेकिन मैं टेक्स्ट को "ए" टैग के समान रूप से संरेखित करने में असमर्थ हूं "बटन" टैग। यह ध्यान रखना महत्वपूर्ण है कि टैग को टेक्स्ट की कई पंक्तियों को संभालने में सक्षम होना चाहिए (इसलिए लाइन-ऊंचाई काम नहीं करेगी)।

http://jsfiddle.net/bZsaw/3/

आप, देखना मैं इसे अंदर और स्थापना के एक स्पैन टैग के संयोजन के साथ काम करने के लिए प्राप्त कर सकते हैं कर सकते हैं: करने के लिए "प्रदर्शन: तालिका"

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

नीचे jsfiddle देखें "ए" और सेटिंग "डिस्प्ले: टेबल-सेल" और "लंबवत-संरेखण: मध्य" अवधि के लिए, लेकिन यह IE7 में काम नहीं करता है।

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

एक साधारण सीएसएस केवल समाधान की तलाश में है।

Answer 1

केवल विश्वसनीय तरीका मैं संरेखित करें खड़ी मिल गया है और अगर यह बहुत लंबा हो जाता है पाठ की रैपिंग की अनुमति देने की है करने के लिए एक 2 कंटेनर दृष्टिकोण के साथ है।

बाहरी कंटेनर में आंतरिक कंटेनर के लिए निर्दिष्ट कम से कम डबल की रेखा ऊंचाई होनी चाहिए। आपके मामले में, जो निम्न अर्थ है:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

छोड़ दिया नाव जोड़े एक टैग पर आप सब कुछ इनलाइन चाहते हैं। यहाँ टैग बहुत में लंबे पाठ के साथ अद्यतन उदाहरण है .. http://jsfiddle.net/bZsaw/13/

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

Answer 2

यदि आपका टेक्स्ट बॉक्स की चौड़ाई से बड़ा नहीं होगा तो आप बॉक्स की ऊंचाई के बराबर रेखा-ऊंचाई सेट कर सकते हैं।

line-height:150px;

Answer 3

उपयोगline-height:150px; और display-inline:block;