लेबल

Question

के नीचे पाठ को संरेखित कैसे करें मुझे लेबल के नीचे लेबल में टेक्स्ट प्राप्त करने में समस्याएं हैं।

मैं एक गिरने वाले पाठ को एनिमेट कर रहा हूं, लेबल "प्रतीत होता है" जैसा दिखना चाहिए, लेकिन पाठ शीर्ष पर रहता है, यह नीचे लेबल का पालन नहीं कर रहा है। कृपया इस jsfiddle को जांचें, समस्या देखने के लिए बटन दबाएं। मैंने एक समाधान समाधान के बिना आने के कई अलग-अलग तरीकों की कोशिश की है।

http://jsfiddle.net/kaze72/jQ6Ua/

.uppgifter 
{ 
    vertical-align: text-bottom; 
} 

मदद करने के लिए नहीं लगता है!

Answer 1

आप

.uppgifter 
{ 
    display: table-cell; 
    vertical-align: bottom; 
    background-color: yellow; 
} 

jsFiddle

अपडेट किया गया jsFiddle ताकि .uppgifter 'animate विधि में ऊंचाई से मेल खाता है #spelplan की ऊंचाई की कोशिश कर सकते हैं।

Answer 2

.uppgifter 
{ 

    padding: 580px 0 1px 230px; 
} 

Answer 3

तुम सिर्फ गद्दी-टॉप चेतन सकता है:

$("#the_button").click(function() { 
    $(".uppgifter").animate({ 
     'padding-top':"500px" 
    }, 4000, "linear", function() {}); 
}); 

Answer 4

इस प्रयास करें:

$(document).ready(function() { 

    $("#the_button").click(function() { 
     $(".uppgifter").animate({ 
      "top":"500px"}, 4000, "linear", function() {}); 
    }); 
}); 

:

$(document).ready(function() { 

    $("#the_button").click(function() { 
     $(".uppgifter").animate({ 
      "height":"100px","padding-top":"500px"}, 
      4000, "linear", function() {}); 
    }); 
}); 

या सिर्फ एक सुझाव है, इस :) पर एक नज़र

के साथ संयुक्त

Answer 5

* 
    { 
     font-family: cursive; 
    } 

    .panel 
    { 
     position:relative; 
     border: 1px solid; 
    } 

    #spelplan 
    { 
     height: 600px; 
    } 

    .uppgifter 
    { 
     position:absolute; 
     vertical-align: text-bottom; 
bottom:0; 

     background-color: yellow; 
    } 

Answer 6

मैंने बस 9 0% ऊंचाई के साथ दो पारदर्शी divs सेट किए जो लेबल ऊंचाई को लेबल ऊंचाई के रूप में बल देते हैं।

http://jsfiddle.net/jQ6Ua/15/

#div 
{ 
height:90%; 
width:200% 
} 

Answer 7

खड़ी एक कंटेनर में एक पाठ संरेखित करने के लिए, multiple techniques इस्तेमाल किया जा सकता। हालांकि, उनमें से अधिकतर रनटाइम पर अतिरिक्त स्क्रिप्ट गणना (यदि टेक्स्ट कंटेनर की ऊंचाई बदल रही है) जो व्यापार तर्क के साथ गड़बड़ कर सकती है।

आपकी विशेष स्थिति में एक हैक का उपयोग किया जा सकता है। आप 100% ऊंचाई और 0 चौड़ाई सीएसएस द्वारा सेट किए गए अपने टेक्स्ट कंटेनर के अंदर खाली स्रोत के साथ एक छवि कंटेनर जोड़ सकते हैं।

<label id="uppgift" class="uppgifter" style="display:inline-block;"><img scr=""/>Abc</label> 
<label id="uppgift2" class="uppgifter" style="display:inline-block;"><img scr=""/>123</label> 

//and css 
.uppgifter img{ 
    height:100%; 
    width:0; 
} 

Example

इस तरह आप अतिरिक्त जोड़ा परतों के लिए तर्क लिखने के लिए नहीं होगा।