i have the cure to CSS vertical align.

Soldato
Joined
17 Oct 2002
Posts
7,408
Location
Stoke-on-Trent
ok add this to your stylesheet.

Code:
<style type="text/css">
<!--

#nav    {

    width: 200px;
    height: 25px;
}

.alignmiddle {

    vertical-align: middle;
}

-->
</style>

Next your going to need to make an invisible image. 1x1 pixel wide. Otherwise known as a "spacer gif".

Now basically you've got your Navigation or whatever with yout text in that you want to align to the middle.

Here's what i've done to get around it.

Code:
<div id="nav"><img src="spacer.gif" height="25" width="0" class="alignmiddle">Your Text Here Will Be Vertically Aligned</div>

For some reason when Browsers render CSS they refuse to vertically align text, but .. they WILL vertiically align images. So with our invisible spacer gif we set the height of the image to the same height of our #nav and then set the class of the image to .alignmiddle.

Now any text that is in the same div and class as that image will be vertically aligned :)

Paul ...
 
Soldato
Joined
18 Oct 2002
Posts
9,598
Location
Sunderland
Code:
<style type="text/css">
<!--
#nav    {
	background-color:#c00;
	font-size:9px;
    width: 200px;
    height: 500px;
}
#nav .alignmiddle {
    width: 0px;
    height: 500px;
}
 .alignmiddle
{
    vertical-align: middle;
}
-->
</style>
<div id="nav"><img src="spacer.gif" class="alignmiddle" alt="" />Your Text Here Will Be Vertically Aligned</div>
Better to set a blank alt tag and the height in your CSS, but thats very useful indeed. RTM this and put it in the archive.
 

Ed

Ed

Soldato
Joined
28 Apr 2004
Posts
4,979
Location
Hastings
As with all things, there are various ways of achieving the same results. Another way to get text to vertical align without using spacer gifs and CSS vertical-align is to use the line-height attribute.

If the DIV is set to 4em in height, set the line-height of the text to 4em. Text will now vertical align.
 
Back
Top Bottom