How to vertically align text in a div

Question

Hello I simply want to align my text vertically in a div

please find the live example http://jsfiddle.net/fb48n/
can any one tell me how to align vertically ?

<div class="Heading">Upload a file</div>

css

.Heading{
   height: 62px;
   vertical-align: 50%;background: #D46023;
   padding: 5px 5px;
   color: white;
   font-size: 18pt;
   font-weight: normal !important;
   display: block;
   text-align: left
}

sorry even if you apply vertical-align: middle or any thing it does not work :-( — ChAmp NOmi, Jan 21 '13 at 12:34
no i dont want to handle it through positioning is there no simple way ? — ChAmp NOmi, Jan 21 '13 at 12:37

score 1 · Answer 1 · answered Jan 21 '13 at 12:37

1

Simply set your line-height the same as the container box.

line-height:62px;

JSfiddle.

answered Jan 21 '13 at 12:37

MarcoK

6,090
2
28
40

No Line-height doesnot work as i have 3 columns side by side , in 3rd column heading text due to large title goes to 2nd line and if i apply line height title cuts see http://jsfiddle.net/fb48n/8/ – ChAmp NOmi Jan 21 '13 at 12:52

score 0 · Answer 2 · answered Jan 21 '13 at 12:36

0

Just set div display to table cell display: table-cell and give it vertical-align: middle.

answered Jan 21 '13 at 12:36

kamil-mrzyglod

4,948
1
20
29

It was good answer but another problem appears after displaying it as table-cell. the background color got shrinked to heading area only – ChAmp NOmi Jan 22 '13 at 11:50

score 0 · Answer 3 · answered Jan 21 '13 at 12:54

0

MarcoK is right! You just have to set the line-height as below:

.Heading {
  line-height:62px;
  background: #D46023;
  color: white;
  font-size: 18pt;
}

Div is already a block and text-align is set to left by default.

Olivier

answered Jan 21 '13 at 12:54

Bredele

115
1
7

How to vertically align text in a div

3 Answers3