How to vertical align text

Question

I have multiple divs like this

<div class='unit'>number1</div>
<div class='unit'>number2</div>
<div class='unit'>number3</div>

css

.unit{
  border: solid 2px yellow;
  float: left;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}

I want to vertical align my contents for every unit so I used css above. However, I can only horizontally center the texts not vertical. Can anyone help me about it?

*vertical align my contents for every unit*. Can you clarify this sentence. As it stands I don't understand — Liam, Mar 11 '14 at 17:15
The accepted answer here looks like a pretty good explanation: http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Rebecca Campbell, Mar 11 '14 at 17:21

score 1 · Accepted Answer · answered Mar 11 '14 at 17:31

1

use it

.unit{
  border: solid 2px yellow;
  display:table-cell;
  height: 50px;
  width: 50px;
  text-align: center;   
  vertical-align: middle;
}

Working here- http://jsfiddle.net/kfE4Z/

answered Mar 11 '14 at 17:31

Abhineet

632
3
16

Mehmet Eren Yener · Answer 2 · 2014-03-11T17:36:34.737

-1

display:table-cell;
vertical-align:middle;

You can create content div inside outer box then if you dont mind using table-cell you can use it

JSFIDDLE DEMO

edited Mar 11 '14 at 17:36

answered Mar 11 '14 at 17:21

Mehmet Eren Yener

2,006
1
23
37

1

Which is already stated in the original CSS. – Paulie_D Mar 11 '14 at 17:21

How to vertical align text

2 Answers2