पूर्वनिर्धारित ऊंचाई होने पर नीचे पाठ को कैसे रखें!

Question

यह अविश्वसनीय रूप से तुच्छ होना चाहिए, लेकिन ऐसा नहीं है। मेरे पास एंकर के लिए पूर्वनिर्धारित ऊंचाई है, और मैं नीचे पाठ को रखना चाहता हूं।

<li><a class="my-text">My Text</a></li> 

मैंने निम्नलिखित सीएसएस का उपयोग किया, जो काम नहीं करता है। पाठ अभी भी शीर्ष पर दिखाई देता है।

a.my-text { 
    background-color:#cccc; 
    height:50px; 
    vertical-align:bottom; 
    width:100px; 
} 

विचार है: मैं नीचे करने के लिए पाठ संरेखित करना चाहते हैं, लेकिन अगर वहाँ पाठ है कि एक पंक्ति से अधिक लंबी है, मैं प्रवाह शीर्ष पर जाने के लिए, सब कुछ किसी और नीचे धक्का नहीं करना चाहता .. यह कैसे प्राप्त किया जा सकता है के बारे में कोई विचार?

Answer 1

यह सीएसएस और आपके द्वारा प्रदान किए जाने वाले एचटीएमएल का उपयोग करके नहीं किया जा सकता है। आप लंगर में एक अतिरिक्त अवधि डालें, तो वह किया जा सकता है:

a.my-text { 
    height: 50px; 
    display: block; 
} 
a.my-text span { 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

आप लंगर में position:absolute साथ bottom:0px उपयोग कर सकते हैं।

एचटीएमएल

<li><a class="my-text">My Text</a></li> 

सीएसएस

li { 
    position: relative; 
    height:200px; 
    border: 1px solid red; 
} 

a.my-text { 
    bottom: 0px; 
    border: 1px solid blue; 
    position: absolute; 
    background-color:#cccc; 
    width:100px; 
    height:50px; 
} 

jsfiddle में देखें।

Answer 3

यह निश्चित रूप से काम नहीं करेगा, क्योंकि <a> एंकर इनलाइन टैग हैं, इसलिए उन्हें ऊंचाई और चौड़ाई असाइन करना बेकार है। vertical-align संपत्ति उस लाइन के संबंध में इनलाइन तत्वों की स्थिति निर्धारित करती है, जो टेक्स्ट की ऊर्ध्वाधर स्थिति नहीं है। (http://reference.sitepoint.com/css/vertical-align देखें) जहां तक ​​मैं समझता हूं कि आप जो अनुरोध कर रहे हैं वह नहीं किया जा सकता है। हालांकि, समान प्रभाव प्राप्त करने के लिए उपर्युक्त सुझाव दिए गए विकल्प हैं।

Answer 4

आपके कोड के साथ समस्या यह है कि एंकर ऊंचाई/चौड़ाई का जवाब नहीं देगा क्योंकि यह एक इनलाइन तत्व है। यदि आप {डिस्प्ले: ब्लॉक} एंकर में अब एक ब्लॉक तत्व जोड़ते हैं, लेकिन, जैसा कि मुझे याद है, वर्टिकल-एलाइन ब्लॉक तत्वों की सामग्री पर काम नहीं करता है। यह डिस्प्ले का उपयोग करने का सबसे आसान तरीका था: टेबल-सेल।

a.my-text { 
    background-color: #ccc; 
    height: 200px; width: 100px; 
    vertical-align: bottom; 
    display: table-cell; 
} 

Answer 5

ऐसा लगता है तुम सिर्फ ऊंचाई शासन के एंकर टैग पर छुटकारा मिलता है और पर li