我制作了盒子并设置了行高，文本自动垂直居中。有没有一种方法或任何技巧可以将文本设置在框的底部？
div {
width: 100px;
height: 100px;
background: #eee;
color: #333;
text-align: center;
line-height: 100px;
vertical-align: text-bottom;
}
<div>FoxRox</div>
2020年更新
您可以使用 CSS grid、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 of the div和line-height文本的相同值，100px在您的情况下，是一种将文本垂直居中的方法div。那就是问题所在。
解决办法就是改变line-height两倍高度减去文本大小并删除无用的vertical-align.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
