Как выровнять текст в нижней части метки

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 's высота в animate метод соответствует #spelplan' s высоту.

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({ 
      "height":"100px","padding-top":"500px"}, 
      4000, "linear", function() {}); 
    }); 
}); 

или просто предложение, взгляните на это :):

$(document).ready(function() { 

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

в сочетании с

.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

Я просто добавил два прозрачных divs, установленных с высотой 90%, которые заставляют текст уменьшаться по мере изменения высоты метки.

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

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

Answer 7

Для вертикального выравнивания текста в контейнере, multiple techniques могут быть использованы. Тем не менее, большинство из них имеют дополнительный скриптовый расчет во время выполнения (если высота текстового контейнера меняется), что может испортить бизнес-логику.

В вашей конкретной ситуации может использоваться хакер. Вы можете добавить контейнер изображения с пустым src внутри текстового контейнера с 100% высота и 0 ширина комплект 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

Таким образом, вам не придется писать логику дополнительных добавленных слоев.