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

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

2020 更新

您可以使用 CSS 网格、flexbox 或原始方法line-height：

body { display: flex } /* just to prettify */

div {
  margin: .5em;
  width: 6.25em; height: 6.25em;
  background: #eee;
  color: #333;
  text-align: center
}

.grid {
  display: grid;
  align-content: end;
}

.flex {
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.lh { line-height: 11.5 /* 6.25*2 - 1.5 */ }

<div class='grid'>Hello</div>

<div class='flex'>Hello</div>

<div class='lh'>Hello</div>

---

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

解决办法是改成line-height两倍高度减去文字大小，去掉 useless vertical-align。

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

演示

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的回答。

这是上述答案的演示。

---

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