Web designing tips & Tricks

what other languages you know?

yes

Hi Tiju do you know CSS in-depth?

Vertical align for navigation lists with multiple lines

Let's see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.


Suppose that we have this CSS code for our single-line navigation list:

#nav li {
display: block;
height: 3em;
margin: 0 3px;
padding: 3px 7px;
background: Khaki;
float: left;
}

that applies to this HTML code:

• Item one


• Item two


• Large third
  item


• The Fourth


• Very large
  fifth item

and we need to modify it for aligning vertically items that have both single and multiple lines. At first sight, the logical approach is using the vertical-align attribute. Since this attribute only applies to inline elements, we add it to the a tag inside the list items:

#nav li a { vertical-align: middle; }



CSS

#nav-fixed li {
display: block;
height: 3em;
margin: 0 3px;
padding: 3px 7px;
background: Khaki;
float: left;
text-align: center;
line-height: 3em;
}

#nav-fixed .double-line {
line-height: 1.5em;
}

HTML

• Item one


• Item two


• Large third
  item


• The Fourth


• Very large
  fifth item

Tiju Joy
CadCenter Tripunitura