बटन तत्व के भीतर पाठ को शीर्ष-संरेखित करें?

Question

मेरे पास कुछ बटन हैं जिनमें टेक्स्ट की अलग-अलग संख्याएं हैं, सभी निश्चित चौड़ाई और ऊंचाई के साथ हैं। ऐसा लगता है कि मैंने <button> </button> टैग के बीच जो कुछ भी रखा है वह डिफ़ॉल्ट रूप से मध्य में लंबवत रूप से गठबंधन है। मैं शीर्ष पर बटन के भीतर टेक्स्ट को लंबवत रूप से संरेखित करना चाहता हूं, ताकि प्रत्येक बटन की पहली पंक्ति एक ही पंक्ति से शुरू हो।

एक वैकल्पिक हल मैंने पाया this था, लेकिन जैसा कि आप इस उदाहरण (http://jsfiddle.net/d27NA/1/) में देख सकते हैं, इस दृष्टिकोण के साथ, मैं मैन्युअल रूप से बटन है कि अलग-अलग लंबाई के ग्रंथों के होते हैं, और कुछ बटन कि लंबे समय तक पाठ शामिल करने के लिए शीर्ष संपत्ति को नामित करने के लिए है शीर्ष पर बह जाएगा।

मुझे आश्चर्य है कि कोई वैकल्पिक दृष्टिकोण है जो इस समस्या को और अधिक सुरुचिपूर्ण तरीके से हल करेगा। धन्यवाद।

एचटीएमएल:

<div> 
    <button class="test"> 
     This text is vertically center-aligned. I want this to be top-aligned. 
    </button> 
</div> 

सीएसएस:

.test{ 
    font-size:12px; 
    line-height:14px; 
    text-align:center; 
    height:100px; 
    width:100px; 
} 

Answer 1

हाँ, बस position:relative; के रूप में बटन और position:absolute;top:0;left:0; के रूप में अवधि को परिभाषित करने और आप व्यवसाय में हैं।

jsFiddle updated

अद्यतन

तो यह जवाब के बाद से तीन साल में, flexbox अधिक प्रमुख बन गया है। इस प्रकार, आप इसे अब कर सकते हैं:

.test { 
    display: inline-flex; /* keep the inline nature of buttons */ 
    align-items: flex-start; /* this is default */ 
} 

यह आपको वह चीज़ देना चाहिए जो आप खोज रहे हैं। आपको appearance: none; (उपयुक्त ब्राउज़र उपसर्गों के साथ) लागू करने की आवश्यकता हो सकती है, लेकिन इसे करना चाहिए।

Answer 2

आपको बस बटन और स्पैन का सीएसएस बदलने की आवश्यकता है। अलग दोनों सीएसएस और बनाने के निम्न परिवर्तन:

button { 
    display: block; 
    position: relative; 
} 

span { 
    display: block; 
    position: absolute; //<-- Make it absolute 
    top: 0px;   //<-- Set the top property accordingly. In this case 0px;  
} 

रूप पूर्णअवधि की स्थिति निर्धारित करें और शीर्ष संपत्ति तदनुसार