Question

我有问题要将标签中的文字放到标签的底部。

我正在制作一个落下的文字，标签看起来“应该”掉落，但是文字保持在顶部，它不会向下跟随标签。请检查此jsfiddle，按按钮查看问题。我没有想出一个有效的解决方案，尝试了很多不同的方法。

.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

我只是添加了两个透明div，其高度为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

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

如何对齐标签底部的文本

7 个答案: