如何對齊標籤底部的文本

我有問題可以將標籤中的文本置於標籤的底部。如何對齊標籤底部的文本

我爲下降的文字製作動畫，標籤看上去像是應該掉下來的，但是文字保持在最上面，它不會跟隨標籤向下。請檢查此jsfiddle，按按鈕查看問題。我嘗試了許多不同的方式，但沒有提出一個可行的解決方案。

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

似乎並沒有幫助！

來源

2013-03-04 kaze

但您不會使標籤掉落。你只是在增加它的高度？你真的想要嗎？ – 2013-03-04 09:21:31

是的，就這樣，我可以有一個「酷」的背景留下痕跡！ – kaze 2013-03-04 10:20:37

您可以嘗試

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

jsFiddle

更新的jsfiddle使.uppgifter的在animate方法高度一致#spelplan的高度。

來源

2013-03-04 09:23:17 peterm

謝謝，效果很好！順便說一句，你知道是否有可能改變（其中之一）標籤水平對齊？我已經嘗試過左邊：50px和邊距左邊50px沒有運氣。 – kaze 2013-03-04 10:21:57

你試試'padding：0 50px;'。這將從標籤的兩側放50px。請看這裏http://jsfiddle.net/ugSVG/ – peterm 2013-03-04 18:55:56

.uppgifter 
{ 

    padding: 580px 0 1px 230px; 
}

來源

2013-03-04 09:21:17

你可以只動畫填充頂：

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

來源

2013-03-04 09:23:50

試試這個：

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

來源

2013-03-04 09:23:51

* 
    { 
     font-family: cursive; 
    } 

    .panel 
    { 
     position:relative; 
     border: 1px solid; 
    } 

    #spelplan 
    { 
     height: 600px; 
    } 

    .uppgifter 
    { 
     position:absolute; 
     vertical-align: text-bottom; 
bottom:0; 

     background-color: yellow; 
    }

來源

2013-03-04 09:25:15 user1900121

我簡單地添加了兩個透明的divs，其高度爲90％，隨着標籤高度的變化強制文本向下。

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

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

來源

2013-03-04 09:36:52

要垂直對準在容器中的文本，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

這樣你就不必編寫邏輯額外加層。

來源

2013-03-04 09:47:15

如何對齊標籤底部的文本

回答

相關問題