Come allineare il testo nella parte inferiore dell'etichetta

Question

Ho problemi a ottenere il testo nell'etichetta nella parte inferiore dell'etichetta.

Sto animando un testo che cade, l'etichetta sembra "cadere" come dovrebbe, ma il testo rimane in alto, non segue l'etichetta verso il basso. Per favore controlla questo jsfiddle, premi il tasto per vedere il problema. Ho provato molti modi diversi senza trovare una soluzione funzionante.

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

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

non sembra per aiutare!

Answer 1

Si può provare

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

jsFiddle

Aggiornato jsFiddle in modo che .uppgifter 'altezza s in animate metodo corrisponde #spelplan' s altezza.

Answer 2

.uppgifter 
{ 

    padding: 580px 0 1px 230px; 
} 

Answer 3

Si potrebbe semplicemente animare il padding-top:

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

Answer 4

provare questo:

$(document).ready(function() { 

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

o semplicemente un suggerimento, dare un'occhiata a questo :):

$(document).ready(function() { 

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

combinato con

.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

Ho semplicemente aggiunto due div trasparenti con un'altezza del 90% che impongono il testo verso il basso man mano che l'altezza dell'etichetta cambia.

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

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

Answer 7

Per allineare verticalmente un testo in un contenitore, multiple techniques può essere utilizzato. Tuttavia, la maggior parte di essi ha un calcolo di script aggiuntivo in fase di esecuzione (se l'altezza del contenitore di testo sta cambiando) che può compromettere la logica di business.

Un hack può essere utilizzato nella tua situazione particolare. È possibile aggiungere un contenitore di immagini con src vuoto all'interno del contenitore di testo con altezza 100% e 0 larghezza impostato da 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

In questo modo non avrebbe dovuto scrivere la logica per i livelli aggiunti ulteriori.