Vertically align text to the bottom of the box?

五迷三道 提交于 2019-12-22 05:53:18

问题


I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box?

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 100px;
    vertical-align: text-bottom;
 }

<div>FoxRox</div>

回答1:


Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem.

Changed line-height and removed useless vertical-align => it's displayed at the bottom now http://dabblet.com/gist/2790000




回答2:


Enclose the text in a p tag with display:inline-block. Set vertical-align to the p element.

<div>
    <p>FoxRox</p>
</div>​

div {
    width: 100px;
    height: 100px;
    background: #eee;
    color: #333;
    text-align: center;
 }
p {
    display: inline-block;
    vertical-align: -80px;
}
​

Demo




回答3:


You could set display to table-cell, try this CSS for example.

width: 100px; 
height: 100px; 
display: table-cell; 
vertical-align: bottom;

Demo: http://jsfiddle.net/Kawwr/




回答4:


You could check out my answer to https://stackoverflow.com/a/6116514/682480.

Here is the demo for the above answer.


The trick is to use display: table-cell on the outer container. That way you can use the vertical-align: bottom and display: inline-block; on the div.



来源:https://stackoverflow.com/questions/10760088/vertically-align-text-to-the-bottom-of-the-box

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!