vertical align

[chiprivers]

I have some text inside a div that I want vertically aligned in the middle of the div.

I have the CSS as this:

[code]
#file_name {
width: 100%;
height: 45px;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #000000
}

.name {
font-family: arial;
font-size: 30px;
color: #000000;
font-weight: bold;
vertical-align: middle
}
[/code]

On my page I then have:

[code]
<div id="file_name">
<span class="name">Text here!</span>
</div>
[/code]

But the text is not aligning vertically in the middle of the box? Any reason why this is not working?

[ToonMariner]

you apply the vertical-allign property to the parent container. So in your case #file_name should have vertical_align: middle; This is a problem if you have other content you don't want to align in this manner...

[chiprivers]

[quote author=ToonMariner link=topic=118192.msg482769#msg482769 date=1165856536]
you apply the vertical-allign property to the parent container. So in your case #file_name should have vertical_align: middle; This is a problem if you have other content you don't want to align in this manner...
[/quote]

I did think that but when I tried that it did not work either!

[ToonMariner]

make sure the line-height of the parent container is 1em;

[chiprivers]

[quote author=ToonMariner link=topic=118192.msg482984#msg482984 date=1165878095]
make sure the line-height of the parent container is 1em;
[/quote]

Just tried that and still no joy!?