CODEWITHSUNDEEP
csshtml
MiB
MiB

Reputation: 611

vertical-alignment of inlined elements

I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.

I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.

The basic structure is header -> header-content ->navigation > li > a All of the list items are set to display:inline. There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.

The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.

I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)

You can find a full code example of the problem here: http://pastebin.com/zcLspjJz

I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.

Upvotes: 0

Views: 112

Answers (1)

Manoj De Mel
Manoj De Mel

Reputation: 995

You can try these methods and if it helps:

  • Use height and line-height properties and use the same value for both. (E.g. height:20px;line-heigt:20px;)
  • OR set the display:table-cell; vertical-align:middle;

Upvotes: 1

Related Questions