ट्विटर बूटस्ट्रैप में सीएसएस के साथ तत्व के बीच में पाठ को कैसे संरेखित किया जाए?

Question

मैं Bootstrap अलर्ट उपयोग कर रहा हूँ और यह मेरा सफलता चेतावनी संदेश है:

<div class="alert alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div> 

और परिणाम है:

आप देख सकते हैं करेंगे के रूप में है कि पाठ संरेखण शीर्ष पर है <div> का। तो, दूसरा इसे मध्य में कैसे संरेखित करेगा?

मैंने padding-top और vertical-align:middle का उपयोग करने का प्रयास किया है, लेकिन न तो काम करता है (मैं एक ही परिणाम के साथ समाप्त होता हूं)।

टेक्स्ट के लंबवत संरेखण को बदलने के लिए मुझे क्या करने की आवश्यकता है?

Answer 1

जैसे div की height के रूप में div उसी के line-height बनाएं:

#UploadSuccess { height: 20px; line-height: 20px; } 

यह केवल यदि आप पाठ की एक पंक्ति है काम करेंगे।

Answer 2

टेक्स्ट टेक्स्ट को लंबवत रूप से केंद्रित करने का प्रयास करना एक आम समस्या है। आम तौर पर यह सामान्य बक्से पर काम करेगा नहीं, लेकिन आप इसे ऊर्ध्वाधर संरेखित के साथ काम करने के लिए मजबूर कर सकते हैं:

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

हालांकि इस IE7 और कम में काम नहीं करेगा।

आप सुनिश्चित हैं कि पाठ आप आप इस तरह प्रभाव नकली करने के लिए line-height इस्तेमाल कर सकते हैं प्रदर्शित करना चाहते हैं:

height: 40px; 
line-height: 40px; /* same as height */ 

इस तरह पार ब्राउज़र काम करता है और IE5.5 मुझे विश्वास है समर्थन है। यदि यह कोई विकल्प नहीं है तो मुझे डर है कि आप भाग्य से बाहर हैं (यह नहीं किया जा सकता है)।

एक तरफ ध्यान दें कि त्रुटि संदेश खराब व्याकरण से पीड़ित है, यह "बधाई हो! आपने इसे सफलतापूर्वक किया है।"

Answer 3

इसे आसान बनाएं;)! अलर्ट-ब्लॉक का उपयोग करने का प्रयास करें! यह नवीनतम बूटस्ट्रैप संस्करण के साथ ठीक काम करता है!

<div class="alert alert-block alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div>