The vertical-align is also not compatible with all browsers. The line-height attribute is about the only thing which can help vertically align in most cases. Even then, it is only possible for one line of text, otherwise it just leads to an equal spacing of several lines (which is a nice way to achieve a clean layout for a paragraph in print style.)
Padding is what you need then. Add a 5px padding to your li element.
The line-height property doesn’t change the vertical alignment, it just affects the height of the line boxes. The vertical-align property controls the vertical alignment of inline boxes within these line boxes, so they do sort of work as a pair.
Ah, well vertical align was my misunderstanding then
Padding works as I expected it to, thanks for that, although I was hoping to have it automatically go in the middle rather than specifying an exact position.
Do you think the creators will ever implement something like that in css?
Setting the line-height to the same value as the height (as suggested above )will automatically align the text in the middle of the line by default. It’s a method I use quite a lot. The only problem would occur was if the text was going to wrap to another line then you would have great big lines.
Therefore its fine to do this as long as you only have single lines of text that aren’t going to wrap.