Вертикального центрирования якоря внутри плавал элементы списка

Question

У меня есть простое меню, как это:

<ul class="menu"> 
    <li> 
     <a href="">Home</a> 
    </li> 
    <li> 
     <a href="">Products</a> 
    </li> 
    <li> 
     <a href="">Contact</a> 
    </li> 
</ul> 

В списке элементов неупорядоченного списка плавал слева и имеет фиксированную height:

ul.menu li { 
    float: left; 
    height: 50px; 
    list-style: none; 
    padding: 0 10px; 
    background-color: yellow; 
} 

jsFiddle

Теперь я хотел бы вертикально центрировать якоря внутри элементов списка.

Каков наилучший подход для этого?

Answer 1

Для вертикального центра текста установите line-height на то же значение, что и высота элемента. Видя, как у вас есть набор высоты, это будет работать без проблем:

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

http://jsfiddle.net/QNMy7/3/

Answer 2

.menu li { 
    float: left; 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
    text-align: center; 
    min-width: 100px; 
} 

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

Answer 3

вопрос с .menu li класса. Вы указали float, чтобы он переместился влево, но чтобы сделать это vertically-aligned, вы должны удалить float и применить display:table-cell;, чтобы получить vertical-alignment.

НАПРИМЕР,

.menu li { 
    /*float: left;*/ 
    display:table-cell; 
    vertical-align:middle; 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
} 

Вот WORKING SOLUTION

Надеется, что это помогает.

Answer 4

добавить высоту строки равна высота:

.menu li { 
    float: left; 
    height: 50px; 
    **line-height: 50px;** 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
} 

Answer 5

Вы можете использовать line-height для контроля вертикального выравнивания, но это работает только надежно по каждому элементу списка, если все они ограничены одной линии.

Самый надежный способ добиться этого путем удаления поплавок & отображения элемента списка как CSS table-cell:

.menu { 
    display: table; 
} 

.menu li { 
    height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
    display: table-cell; 
    vertical-align: middle; 
} 

.menu li a { 
    display: block; 
} 

Таким образом, если одна из ссылок падает на две строки, она по-прежнему вертикально в центре , как показано здесь:

http://jsfiddle.net/QNMy7/6/

Answer 6

Кроме того, чтобы плавать и таблицы ячейки, вы можете также использовать встроенный блок:

.menu li { 
    display: inline-block; 
    line-height: 50px; 
    padding: 0 10px; 
    list-style: none; 
    background-color: yellow; 
} 
.menu li a { 
    vertical-align: middle; 
} 

Подобно другим должностям, я поставил line-height: 50px на .menu li и vertical-align: middle на a элементов. В этом примере вы можете опустить высоту.

См демо: http://jsfiddle.net/audetwebdesign/QNMy7/7/