最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to align text in bottom of label - Stack Overflow

programmeradmin4浏览0评论

I've got problems to get text in the label to the bottom of the label.

I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without ing up with a working solution.

/

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

Seems not to help!

I've got problems to get text in the label to the bottom of the label.

I'm animating a falling text, the label does "seem" to fall as it should, but the text stays on top, it's not following the label downwards. Please check this jsfiddle out, press the button to see the problem. I have tried many different ways without ing up with a working solution.

http://jsfiddle/kaze72/jQ6Ua/

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

Seems not to help!

Share Improve this question asked Mar 4, 2013 at 9:11 kazekaze 4,35914 gold badges55 silver badges75 bronze badges 2
  • but you are not making the label fall. you are simply increasing its height?? is that you really want?? – Manish Mishra Commented Mar 4, 2013 at 9:21
  • Yes, in that way, I can have a "cool" background leaving a trace! – kaze Commented Mar 4, 2013 at 10:20
Add a ment  | 

7 Answers 7

Reset to default 2

You can try

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

jsFiddle

Updated jsFiddle so that .uppgifter's height in animate method matches #spelplan's height.

.uppgifter
{

    padding: 580px 0 1px 230px;
}

You could just animate the 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() {});
    });
});

or just a suggestion, take a look at this :):

$(document).ready(function() {

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

bined with

.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;
    }

I simply added two transparent divs set with a 90% height that force the text down as the label height changes.

http://jsfiddle/jQ6Ua/15/

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

To vertically align a text in a container, multiple techniques can be used. However, most of them have additional script calculation at runtime (if the height of the text container is changing) which can mess with the business logic.

A hack can be used in your particular situation. You can add an image container with empty src inside your text container with 100% height and 0 width set by 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

This way you would not have to write logic for additional added layers.

发布评论

评论列表(0)

  1. 暂无评论