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>
2020 Update
You can use CSS grid, flexbox or the original method with 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>
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.
The solution is to change line-height
to twice the height minus the size of the text and remove useless vertical-align
.