Vertical alignment for a list item

HTML & CSS
1

Hi Guys,
I’m having a little trouble with my list items.
No matter what I set the vertical list alignment to, the text always stays at the top.

I’ve set the vertical alignment to middle, but it hasn’t budged.

Here’s my css, what’s missing from it?


#main_menu {
	border: 1px solid #000000;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	bottom: 30px;
}
#main_menu  li {
	text-align: left;
	text-indent: 20px;
	background-image: url(images/menu-link-background-copy2.png);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	height: 60px;
	vertical-align: middle;
}
2

The vertical-align property only applies to inline boxes and table cells. A list item is neither, and this property isn’t inherited.

What are you trying to align to, anyway? There’s no mention of a line height anywhere that I can see.

If you have a number of inline boxes within the line box of the list item, then you can specify the vertical alignment of those. For instance,

#main_menu li img {vertical-align:middle}

BTW, the bottom:30px declaration in the first rule will be ignored, if the element isn’t positioned (which it doesn’t appear to be).

3

Hi,
what I’m trying to do is to have the text appear vertically central in the li.

At the moment the text just sticks to the top of the li.

In other words, I’m trying to get the text within the li to be of equal distance between the top of the li and the bottom of the li.

For example, if the li is 20px in height, I would want the text to be 5 px from the top and 5px from the bottom (Assuming that the font size is 10px).

4

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.

5

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.

6

Ah, well vertical align was my misunderstanding then :slight_smile:
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?

thanks again

7

Is this what you’re after?

If you set height and line-height to be equal, text will center vertically. Try this code for example.

ul {
border: 1px solid #000000;
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
text-align: left;
text-indent: 20px;
background-image: url(images/menu-link-background-copy2.png);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
line-height: 60px;
height: 60px;
}

8

ah ha, yes that’s exactly what I was after.

It works and makes perfect sense as well.
I’m not surprised that I didn’t figure that one out on my own, thanks a lot :slight_smile:

9

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.:slight_smile: