Sposób wyrównania tekstu na dole etykiety

Question

Mam problem z umieszczeniem tekstu w etykiecie na dole etykiety.

Ja animuję spadający tekst, etykieta "wydaje się" upaść tak jak powinna, ale tekst pozostaje na wierzchu, nie podąża za etykietą w dół. Sprawdź to jsfiddle, naciśnij przycisk, aby zobaczyć problem. Próbowałem na wiele różnych sposobów, nie wymyślając działającego rozwiązania.

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

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

nie wydaje się, aby pomóc!

Answer 1

Można spróbować

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

jsFiddle

Updated jsFiddle tak że .uppgifter 's wysokość w animate metody mecze #spelplan' s wysokość.

Answer 2

.uppgifter 
{ 

    padding: 580px 0 1px 230px; 
} 

Answer 3

Można tylko animować padding-top:

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

Answer 4

spróbuj tego:

$(document).ready(function() { 

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

lub tylko sugestia, przyjrzeć się tym :):

$(document).ready(function() { 

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

w połączeniu z

.uppgifter 
    { 
     vertical-align: text-bottom; 
     position:relative; 
     background-color: yellow; 
    } 

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

Po prostu dodałem dwa przezroczyste zestawy div z wysokością 90%, które wymuszają spadek tekstu wraz ze zmianą wysokości etykiety.

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

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

Answer 7

pionowo wyrównać tekst w pojemniku, multiple techniques mogą być użyte. Jednak większość z nich ma dodatkowe obliczenia skryptów w czasie wykonywania (jeśli wysokość kontenera tekstowego się zmienia), co może zepsuć logikę biznesową.

Hack może być użyty w konkretnej sytuacji. Możesz dodać kontener z pustym src do kontenera tekstowego za pomocą 100% wysokości i 0 szerokości ustawionej przez css.

<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

W ten sposób nie będzie musiał napisać logiki dodatkowych warstw dodaje.