Wed, 2007-11-21 10:21
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
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;
}
Wed, 2007-11-21 12:21
#1
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).
Wed, 2007-11-21 12:56
#2
That was quick
Chris , just read your comments and applied what you wrote ( line-height ) ... it indeed solves my problem .... 
Thx for the help and for the info.
Brgds
Tom