выровнять текст в центр в меню li

Question

Я создал меню с подменю в нем. для каждого li я использовал прописку, чтобы указать ширину и выровнять текст в центре в li, как предложил мой коллега, вот скрипка, созданная jsfiddle.net/p7Nsf/4/

, но мне пришлось разделить каждый элемент li на 980px так что он заполнит 980px, поэтому я использовал ширину на элементах li, мой вопрос заключается в том, как выровнять текст до середины элемента li в главном меню и подменю, а мое подменю hieght и width изменилось. здесь обновленная скрипка jsfiddle.net/p7Nsf/5/

Answer 1

Просто добавьте line-height.

Updated jsFiddle here

Я добавил:

.menu ul li a { 
    line-height: 30px; 
} 

Изменено CSS:

.menu ul li a { 
    display: block; 
    width: 121px; 
    line-height: 30px; 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
} 

Чтобы исправить проблемы, выпадающие, я добавил:

.menu ul ul li a { 
    height: 35px; 
    color: #000; 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 10px; 
} 

Я установил ширину, установил text-align:left и добавил прокладку.