CSS vertical-align doesn't do anything

Question

I am trying to align text at the bottom of a Div and the Middle of a Div. The CSS attribute vertical-align:text-bottom; seems to do nothing?

I have 3 divs and would like to center the div xrLabel1 and the other div xrLabel5 to put the text at the bottom.

I have included some sample code.

Thanks

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="format.css"/>
        <title></title>
    </head>
    <body>
        <div class="TopMargin">
            <div class="xrLabel2">xrLabel2</div>
            <div class="xrLabel1">xrLabel1</div>
            <div class="xrLabel5">xrLabel5</div>
        </div>
    </body>
</html>

The CSS file format.css

.TopMargin
{
position:absolute;
left:0px;
top:0px;
height:92px;
width:650px;
background-color:#808080;
color:#000000;
}

.xrLabel2
{
position:absolute;
left:225px;
top:17px;
height:67px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-middle;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}

.xrLabel1
{
position:absolute;
left:367px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:right;
vertical-align:text-bottom;
font-family:Times New Roman ;font-size:9.75pt;text-decoration:underline;
}

.xrLabel5
{
position:absolute;
left:75px;
top:8px;
height:75px;
width:99px;
background-color:#FFFFFF;
color:#000000;
text-align:center;
vertical-align:text-top;
font-family:Times New Roman;font-size:9.75pt;
}

score 0 · Answer 1 · answered Dec 20 '13 at 11:14

0

Block elements does not support vertical-align as such. You need to set the display attribute to table-cell. Then you can use vertical-align.

http://jsfiddle.net/kuUHV/

answered Dec 20 '13 at 11:14

F. Müller

2,577
6
30
37

score 0 · Accepted Answer · answered Dec 20 '13 at 11:51

0

You need to use display:table on the parent element, and display:table-cell; vertical-align:bottom; for the children. Example here: http://jsfiddle.net/hAScR/

answered Dec 20 '13 at 11:51

n1kkou

2,848
2
16
27

Thanks for this solution, it looks like the best. – user3122553 Dec 20 '13 at 12:38

Mr. iC · Answer 3 · 2013-12-20T11:40:23.077

-1

You could use text-align:center on the parent element. And a margin-top on the child element.

<div id="outer"> #text-align:center
  <div class="inner">Radom text </div> # margin-top:__
</div>

Fiddle Demo :)

Note: // Don´t use this for responsive Design - when you resize the window the element will stay on the same spot if the element gets to small.

edited Dec 20 '13 at 11:40

answered Dec 20 '13 at 11:26

Mr. iC

129
9

this does not place the element always in the middle - it does not scale with the element. – F. Müller Dec 20 '13 at 11:33
@F.Müller thanks for pointing that out. Mentioned it in the Note – Mr. iC Dec 20 '13 at 12:03

CSS vertical-align doesn't do anything

3 Answers3