...

View Full Version : CSS Vertical Alignment in LI Tag?



ddmobley
07-13-2007, 08:11 PM
I am working on a site that has the main menu laid out horizontially using UL and LI tags. Each LI is 100 pixels wide by 42 pixels high. I want the anchor text to be aligned in the center and middle of the LI space. I have accomplished text-align: center on the LI, but vertical-align:middle doesn't work. Ideas?

Site: http://www.tonybassconsulting.com/

koyama
07-13-2007, 08:34 PM
I am working on a site that has the main menu laid out horizontially using UL and LI tags. Each LI is 100 pixels wide by 42 pixels high. I want the anchor text to be aligned in the center and middle of the LI space. I have accomplished text-align: center on the LI, but vertical-align:middle doesn't work. Ideas?

Site: http://www.tonybassconsulting.com/
You can specify a larger line-height:


#nav a {
display: block;
font-weight: normal;
font-size: 14px;
font-family: "Verdana", "Helvetica Neue Bold Condensed", Arial, sans-serif;
color: #666;
margin: 0;
padding: 0 0 0 0;
text-decoration: none;
text-transform: uppercase;
line-height: 42px;
}

Not related to the issue, but you need to get rid of this line:


<?xml version="1.0" encoding="iso-8859-1"?>
It will trigger quirks mode (http://www.quirksmode.org/css/quirksmode.html) in IE6 (not in IE7 though). This may give you head ache in the future.

ddmobley
07-13-2007, 09:15 PM
You can specify a larger line-height:


#nav a {
display: block;
font-weight: normal;
font-size: 14px;
font-family: "Verdana", "Helvetica Neue Bold Condensed", Arial, sans-serif;
color: #666;
margin: 0;
padding: 0 0 0 0;
text-decoration: none;
text-transform: uppercase;
line-height: 42px;
}

Not related to the issue, but you need to get rid of this line:


<?xml version="1.0" encoding="iso-8859-1"?>
It will trigger quirks mode (http://www.quirksmode.org/css/quirksmode.html) in IE6 (not in IE7 though). This may give you head ache in the future.

Thanks, the line height did the trick. but only for short menu names. Menu names that wrapped were still messed up. This is a Joomla install, and that is why the XML Version junk is in there. I actually had to code a fix into the menuing program that if the menu name was long than X characters and contained a space (meaning it was gonna wrap) to set another class designation so I could code other behaviors. Dynamic menu structures are always full of these little issues.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum