javascript - 如何对齐标签底部的文本

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({ 
            "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

我只是添加了两个设置为 90% 高度的透明 div，当标签高度发生变化时，它们会强制文本向下。

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

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

Answer 7

要垂直对齐容器中的文本，可以使用多种技术。但是，它们中的大多数在运行时都有额外的脚本计算（如果文本容器的高度发生变化），这可能会干扰业务逻辑。

可以在您的特定情况下使用 hack。您可以在文本容器中添加一个带有空 src 的图像容器，其高度为 100%，宽度由 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;
}

例子

这样您就不必为额外的添加层编写逻辑。