2 replies [Last post]
Thomas357be
Offline
newbie
Last seen: 12 years 2 weeks ago
Timezone: GMT+1
Joined: 2007-11-15
Posts: 2
Points: 0

I have a <ul> within a <div> , now i would like to center this list vertically so it is in the middle of the <div> , but i can't seem to make it work.The list is aligned at the top instead of the middle.

Any help would be nice

HTML



  • home
  • |
  • about us
  • |
  • contact us






CSS

#bannerTop{
background-image:url(images/aonlogo2.jpg);
background-repeat:no-repeat;
background-position:left;
height:75px;
background-color:#5D5A5A;
border-bottom-width:thick;
border-bottom:solid;
border-bottom-color:#99CC66;
}


ul.horiz li{
display:inline;
}


ul {
vertical-align:middle;
text-align:right;
padding-right:15px;
}

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

A couple of things:

A couple of things:
- vertical-align only applies to elements with display:table-cell (e.g. TH,TD) or display:inline. It doesn't apply to elements with display:block (e.g. UL in default styling).
- When applied to display:inline, vertical-align aligns the line box of its contents with the line-box of its parent. That is, if you have different font heights, it will align the different bits of text in the middle (or the baseline, top or bottom). Its normal behaviour for leading (difference between line-height and font-size) to be split equally above and below the text.

That is, if you want you list items to appear centered vertically within the banner, set a line-height on the UL of 75px (and remove the vertical-align).

Thomas357be
Offline
newbie
Last seen: 12 years 2 weeks ago
Timezone: GMT+1
Joined: 2007-11-15
Posts: 2
Points: 0

That was quick

Chris , just read your comments and applied what you wrote ( line-height ) ... it indeed solves my problem .... Smile

Thx for the help and for the info.

Brgds

Tom