[thelist] Help with CSS vertical alignment of menu items

Symeon Charalabides symeon at systasis.com
Sat May 2 04:13:00 CDT 2009


Bill Moseley wrote:
> I have A few questions about this layout:
> 
>     http://hank.org/banner/
> 
> Goal is to make the markup and css as simple as possible,
> work best with different font sizes, and to work in IE6 as well
> as modern browsers.
> 
> Some of the questions I have are on that page, but the main problem
> I'm having is vertically aligning the menu links (and text in the case
> of "Blog").
Hi Bill,

When you want to middle-align an element inside a container box that you 
know the height of, the best approach is to declare the line-height of 
the container box to be equal to its height, and do away with all 
padding & margins for the element. It works on all browsers.

> 
> Those links are display block to allow clicking anyplace in the
> button-like area:
> 
>     #header li a {
>         height: 100%;
>         display: block;
>     }
> 
> I got stuck on trying to vertically align the links (and "Blog" text),
> and tried this:
> 
> 
>     #header li a,
>     #header li.on {
>         padding-top: 35px;
>     }
> 
> Which means if font size is changed then the text isn't vertically
> aligned.
> 
> 
> That also pushes the box of the <a> down below the banner (as can be
> seen by mousing over *below* the banner bar).
> 
> Other one I'm not sure about is why it doesn't render in IE6.  I
> assume because of hight issue someplace.
> 
> IE7 and Safari seem to render ok, although not sure why IE7 doesn't
> render 100% when making the view smaller (Ctrl - ).

Cheers,

-- 

Symeon Charalabides (cosmopolite trainee)
-----------------------------------------
http://www.systasis.com
http://twitter.com/bluesymeon
http://www.linkedin.com/in/symeon
http://www.last.fm/user/bluesymeon



More information about the thelist mailing list