如何在标签底部对齐文本

How to align text in bottom of label

本文关键字：对齐 文本 底部 标签      更新时间：2023-09-26

我有问题，在标签的底部标签的文本。

我正在动画一个下降的文本，标签确实"似乎"应该下降，但文本保持在顶部，它没有跟随标签向下。请检查一下，按下按钮看看有什么问题。我试过很多不同的方法，但都没有一个有效的解决方案。

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

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

似乎没有帮助!

你可以试试

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

jsFiddle

更新jsFiddle，使animate方法中.uppgifter的高度与#spelplan的高度匹配

.uppgifter
{
    padding: 580px 0 1px 230px;
}

你可以直接设置padding-top:

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

try this:

$(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;
    }

    * 
    {
        font-family: cursive;
    }
    .panel
    {
        position:relative;
        border: 1px solid;
    }
    #spelplan
    {
        height: 600px;
    }
    .uppgifter
    {
        position:absolute;
        vertical-align: text-bottom;
bottom:0;
        background-color: yellow;
    }

我只是添加了两个透明div集合，高度为90%，随着标签高度的变化强制文本向下。

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

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

要垂直对齐容器中的文本，可以使用多种技术。然而，它们中的大多数在运行时有额外的脚本计算(如果文本容器的高度正在改变)，这可能会扰乱业务逻辑。

hack可以在您的特定情况下使用。你可以在文本容器中添加一个带有空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;
}

这样你就不需要为额外添加的层编写逻辑了

相关文章：