I have been designing my new site over the last few days and have just come to write the XHTML and CSS. The problem being I want the menu across the screen in text with an image as a divider. the only problem is the text defaults to the bottom of the image, where I want it in the middle.

I have tried vertical-align but this just puts it to the top or doesn't move it at all. Any ideas?

http://3sky.eu/

(the menu is in a separate .php file)

PHP Code:

<div id="menu">
<ul>
<li><a href="index.php"> HOME </a><img src="images/spliter.jpg"></li>
<li><a href="tvshows.php"> TV SHOWS </a><img src="images/spliter.jpg"></li>
<li><a href="films.php"> FILMS </a><img src="images/spliter.jpg"></li>
</ul>
</div> 


The CSS file

#menu {
    clear: both;
    list-style-image: none;
    list-style-type: none;
    width: 770px;
    margin-right: auto;
    margin-left: auto;
    margin-top: -12px;
}

#menu li {
    font-family: Tahoma;
    font-size: 18px;
    color: #000000;
    text-decoration: none;
    list-style-image: none;
    list-style-type: none;
    float: left;
}

#menu li a {
    text-decoration: none;
    color: #000000;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: -15px;
}

#menu li a:hover {
    color: #FFFFFF;
}

determine the height of the image in pixels, then set the height and line-height of the text to that exact pixel amount:

an example:

menu li a {
display: block;
height: 25px; /*however tall the image is*/
line-height: 25px;
}

that doesn't work if you resize the text in via the browser

To be honest, twiggy, I think you have the wrong approach here. If it was me , I would be placing the image as a background to the link, using background positioning a block display to give me better control over the link. There are about a hundred different ways to approach this problem. The usual solution to getting text to vertically center over a block-type element is to set height and line-height to the same amount.

The line-height trick worked for the text but now the images have moved down. Any ideas?

Take a look at http://www.3sky.eu

I have decided to not have any dividers now, causing to many problems. Thanks for your help any way.

vertical-align only applies to inline elements, li's are block

Set the li height to the image height, float the image right, put the anchor in a span inside the li and use vertical-align:middle for the anchor, set the font-size of the span to the image height in pixels, and set the font-size of the anchor to 1/5 the span text height.