...

View Full Version : Css Vertical align text in <div>



craziwolf
08-05-2010, 12:35 AM
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
08-05-2010, 12:38 AM
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
08-05-2010, 12:45 AM
So a div itself does not have a vertical align function?

thanks anyway ill play with the table

spikeon
08-05-2010, 12:48 AM
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
08-05-2010, 12:48 AM
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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum