Css Vertical align text in <div>

[craziwolf]

Over the last few years i let my knowledge of html and css slip in to the void and now im trying to figure out how to vertically align my text in a div tag but to no avail!

heres what i have

DIV.FI {
background: #b9bab9;
position: absolute;
text-align: center;
vertical-align:middle;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
margin-bottom: 150px;
}


any help is appreciated!

[spikeon]

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

vertical align only works in table cells.

note: it only does what you want in table cells, vertical-align on div's normally sets how it ligns up with text as an inline element, therefore setting the display to table-cell will fix your problem

[craziwolf]

So a div itself does not have a vertical align function?

thanks anyway ill play with the table

[spikeon]

it does, however, it sets how the div is alligned within text as an inline element, for instance, vertical-align: bottom would make the bottom of the image in line with the bottom of the text, whereas middle would make the middle of the image be in line with the middle of the text.

using "display: table-cell;" you trick the div into acting like a td, so vertical align will work.

[spikeon]

note, you don't have to make a table, just put display:table-cell; in your css for the div

so...

DIV.FI {
display:table-cell;
background: #b9bab9;
position: absolute;
text-align: center;
vertical-align:middle;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
margin-bottom: 150px;
}