Как я могу вертикально центрировать текст в навигационной панели ul без этих множественных конфликтов CSS?

Question

Я создал функциональную навигационную панель CSS, за исключением некоторых неуправляемых побочных эффектов CSS.

Я пытаюсь вертикально центрировать текст в каждом блоке списка, а vertical-align: middle не работал. Вместо этого, я использую padding-top: 13px, но это отображает заполненную область без background-color остальной части списка, а стиль display: inline block ссылки не также распространяется на мягкую область! (a:hover влияет только на область под заполнителем)

Итак, как я могу вертикально центрировать текст в элементах списка без этих проблем CSS?

Вот соответствующий CSS:

/* header section */ 
#header 
{ 
    padding-left: 115px; 
    margin-bottom: 10px; 
} 
    #main-menu 
    { 
     list-style-type: none; 
    } 
    #main-menu li 
    { 
     border: 1px solid black; 
     text-align: center; 
     padding-top: 13px; 

     color: #666; 
     font-family: "Lucida Console"; 
     font-variant: small-caps; 
     letter-spacing: 2px; 

     /* for block layout */ 
      display: -moz-inline-box; /* for firefox */ 
      display: inline-block; 

     width: 153px; 
     height: 32px; 
    } 
    #main-menu a:link, a:visited 
    { 
     display: -moz-inline-box; /* for firefox */ 
     display: inline-block; 

     width: 100%; 
     height: 100%; 
     background-color: #eee; 
    } 
    #main-menu a:hover, a:active 
    { 
     background-color: #bbb; 
    }<br /><br /> 

... и вот соответствующий HTML:

 <!-- header section --> 
     <div id = "header"> 
      <ul id = "main-menu"> 
       <!-- no spaces between list elements when all on the same line! --> 
       <li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li> 
      </ul> 

     </div> <!-- end of header section --> 

Answer 1

Вещи, которые я изменил:

• Изменено для отображения в виде элемента блока.
• Удалено заполнение в верхней части элементов li.
• Добавлена ​​высота отступов до высоты элементов li.
• Установите высоту линии на высоту элементов li.
• Некоторые форматирование

http://jsfiddle.net/gtr053/7yrX7/

Answer 2

Попробуйте установить высоту строки

line-height: 13px; 

Answer 3

Я не много знаю ни к чему, но я использовал это только сейчас, и он работает

Введенный в Quick CSS общий стиль

li { 
    display:inline; 
    padding: 0px 50px; 
} 

Первые px приносят элементы меню вниз, а второй разворачивает их.