Vertically align text to the bottom of the box?

Question

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>

You could change the line height to something around 180px. Vertical-align is only for inline elements. — j08691, May 25 '12 at 19:12

Ana · Accepted Answer · 2020-02-18T07:34:28.347

21

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.

edited Feb 18 '20 at 07:34

answered May 25 '12 at 19:13

Ana

35,599
6
80
131

That's *part of* the problem. The content has to be inside an `inline-block` for `vertical-align` to work. – bfavaretto May 25 '12 at 19:16
I liked how you solved it by just using `line-height`. Smart! thnx a lot, saved me a lot of markup! – phoxd May 26 '12 at 03:58
4

Can only imagine what wisdom that broken link once might have contained – Henry Woody Jul 02 '19 at 17:33
Hi @Ana, Can you please retrieve you thoughts that you pasted into the broken link. An up-voted answer going to waste right now. – TheArchitecta Feb 11 '20 at 11:55

score 9 · Answer 2 · answered May 25 '12 at 19:15

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

score 5 · Answer 3 · answered May 25 '12 at 19:17

5

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/

answered May 25 '12 at 19:17

walmik

1,440
2
13
30

Spot on, and not as complicated as the other answers would lead you to believe – JDandChips Dec 01 '14 at 18:56
This won't work if the `position` is defined. It works only with position relative. – Abdul Alim Jul 31 '19 at 12:43

score 2 · Answer 4 · edited May 23 '17 at 12:00

2

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.

edited May 23 '17 at 12:00

Community

1
1

answered May 25 '12 at 19:17

Code Maverick

20,171
12
62
114

Vertically align text to the bottom of the box?

4 Answers4

Linked