Question

我制作了盒子并设置了行高，文本自动垂直居中。有没有办法或任何形式的技巧来设置框底部的文字？

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

<div>FoxRox</div>

Answer 1

将div的height和文本的line-height设置为相同的值，在您的情况下为100px，是一种在div中垂直居中文本的方法。这就是问题所在。

更改了line-height并删除了无用的vertical-align =＆gt;它现在显示在底部http://dabblet.com/gist/2790000

Answer 2

将文字附加到p标记display:inline-block。将vertical-align设置为p元素。

<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

Answer 3

您可以将显示设置为表格单元格，例如尝试此CSS。

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

演示：http://jsfiddle.net/Kawwr/

Answer 4

您可以查看我对https://stackoverflow.com/a/6116514/682480的回答。

以上答案中的 demo 。

诀窍是在外部容器上使用display: table-cell。这样，您就可以在div上使用vertical-align: bottom和display: inline-block;。

将文本垂直对齐到框的底部？

4 个答案: