8 replies [Last post]
essdog
essdog's picture
Offline
newbie
Last seen: 14 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

I want to set the vertical align of each of the menu items to middle, but for some reason the CSS command doesn't work. Obviously I'm doing something wrong. Can someone point out what I've missed? I have my palm in forehead slapping position.

My HTML:

Title

My CSS:

#menuBox { background: #99CC99; height: 30px; }

#menuList {
height: 30px;
vertical-align: middle;
margin: 0px;
list-style-type: none;
}

#menuItem {
vertical-align: middle;
height: 30px;
width: 100px;
color: #FFFFFF;
float: left;
}

Thanks in advance, everyone.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Vertical-align works on

Vertical-align works on inline elements (and table cells) only. Also an id should be unique, use "class" if you need a non-unique method to address an group of elements - although "#menuList li" is most likely sufficient.

Take a look at this example and also follow the links to Bruno's pages for a more detailed explanation.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Don't forget the Doctype!

Don't forget the Doctype!

Verschwindende wrote:
  • CSS doesn't make pies

essdog
essdog's picture
Offline
newbie
Last seen: 14 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Maybe I should be asking:

Maybe I should be asking: with my current code is there anything I can do to center the elements in the menu. The #menuList li suggested did not work. The DOC type is nice, but didn't do anything either. I am a total n00b Smile Please help me with coding examples.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Quite often an element can

Quite often an element can be centered with text-align:center but inline elements won't center (such as span, a etc AND LI). To make them center you must make them block level elements by adding display:block too. Of course, that can also cause problems.

[Edit] Just checked the manual. LI's ARE block level

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Don't use vertical-align

essdog wrote:
Maybe I should be asking: with my current code is there anything I can do to center the elements in the menu. The #menuList li suggested did not work. The DOC type is nice, but didn't do anything either. I am a total n00b Smile Please help me with coding examples.

As Chris.S said, vertical-align only works on inline elements. <LI>s are block-level.

However, because you know the height, simply add line-height: 30px to the list-item, that will vertically center the text.

Verschwindende wrote:
  • CSS doesn't make pies

essdog
essdog's picture
Offline
newbie
Last seen: 14 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Actually I figured it out. I

Actually I figured it out. I just used padding-top of 8 pixels. That did the job. Is that a standard thing to do or is it hacky?

Thanks for all the replies everyone. Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

essdog wrote:Actually I

essdog wrote:
Actually I figured it out. I just used padding-top of 8 pixels. That did the job. Is that a standard thing to do or is it hacky?

Thanks for all the replies everyone. Smile

Yes, it's hacky. As I said up there, if you know the height of the element use line-height instead of top padding - you'll get much better, more consistent results.

Verschwindende wrote:
  • CSS doesn't make pies

essdog
essdog's picture
Offline
newbie
Last seen: 14 years 45 weeks ago
Timezone: GMT-8
Joined: 2007-01-17
Posts: 9
Points: 0

Great. I fixed it. Thanks

Great. I fixed it. Thanks for the response.