Question

I have a navigation menu with css. I’m trying to vertically and horizontally center the li elements.
I have them centered horizontally, but can’t get them centered vertically… especially since they can be multi-line (ie: Bath&
Kitchen) vs single-line (ie: Plumbing)…

JS Fiddle

CSS:

 #menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center;
 }

 #menu li {
      float: left; 
      position: relative; 
      width: 75px; 
      height: 30px; 
      margin-right: 2px; 
      background-color: #994708;
 }

 #menu li a {
      color: #FFFFFF; 
      display: block; 
      position: relative; 
      vertical-align: middle;
      width: 75px; 
      height: 30px; 
      font-size: 11px; 
      line-height: 12px; 
      text-transform: uppercase; 
      text-decoration: none;
 }

HTML:

  <ul id="menu">
      <li><a href="#">All<br />Products</a></li>
      <li><a href="#">New<br />Products</a></li>
      <li><a href="#">Plumbing</a></li>
      <li><a href="#">Bath &<br />Kitchen</a></li>
  </ul>

Any help or thoughts would be appreciated!
Thanks.

Answer 1

I added a special class to handle the single line menu items. I just wrote some code in the databinding and checked if there was a “line break” in the text. If so, apply the special class.