вертикальное выравнивание текста в горизонтальном меню

У меня есть меню, в котором некоторые ссылки являются одной строкой, а некоторые 2. Я не могу найти способ вертикального выравнивания текста, он придерживается вершины. Любые идеи о том, как исправить мой код, будут отличными.вертикальное выравнивание текста в горизонтальном меню

CSS-код:

ul { 
    margin: 0; 
    padding: 0; 

} 
ul.menu { 
    height: 100px; 
    border-left: 1px solid rgba(0,0,0,0.3); 
    border-right: 1px solid rgba(255,255,255,0.3); 
    float:left; 
    display: table-row; 
} 

ul.menu li { 
    list-style: none; 
    float:left; 
    height: 99px; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    background: rgba(191,232,108,1); 

    } 

ul li a { 
    display: block; 
    padding: 0 20px; 
    border-left: 1px solid rgba(255,255,255,0.1); 
    border-right: 1px solid rgba(0,0,0,0.1); 
    text-align: center; 
    height:99px; 
    text-decoration: none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 21px; 
    color: #371C1C; 
    background : rgb(168,168,168); 

    } 

ul li a:hover { 
    background: transparent none; 
    color: #fff; 
} 

ul li.active a{ 
    color: #0f0; 
    background:rgba(31,169,244,1); 
} 
span { 
    display: table-cell; 
    vertical-align: middle; 
    }

HTML, здесь я попытался несколько способов, чтобы разорвать строку:

<div class="wrapper"> 
<div class="container"> 
<ul class="menu"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contacts</a></li> 
<li><a href="#"><span>bla bla<br/> blabla bla</span></a></li> 
<li><a href="#">Twitter bla<br/> blabla bla</a></li> 
<li><a href="#">Twitter bla blabla bla</a></li> 

</ul> 
</div> 
</div>

источник

2013-02-11 Naomi

Move:

display: table-cell; 
vertical-align: middle;

..into к A - тег CSS, а также из LI.

В общем, вы найдете, что если вы поставите все стилизации (кроме display:position: и float:) на А-теге, а не список, который вы будете иметь меньше головной боли в целом.

См. Мой учебник, I Love Lists.

источник

2013-02-11 20:37:53

Великого ответ спасибо, работает отлично. Также понравился учебник. Вы изменили мою жизнь. – Naomi

Герой пост. Спасибо брат. – SC1988

Спасибо, что привлек меня к этому. Это было своевременное исправление того, над чем я работал. –

Вы можете сделать высоту строки ваших a тегов на ту же высоту из ваших li «ы

источник

2013-02-11 20:45:07 Luke

Из моего опыта это решение не работает для пункта меню с 2 строками или более. – Naomi

Возможно, это правда, мне просто не нравятся стили таблицы за пределами таблицы. В этом нет ничего плохого, это просто нарушает соглашение. – Luke

-2

<div id="midalign"> 
    <ul> 
     <li><a>Home</a></li> 
     <li><a>About Us a very long link </a></li> 
     <li><a>Forum</a></li> 
    </ul> 
</div> 

CSS code: 
#midalign ul { 
    display:table-cell; 
    vertical-align:middle; 
    list-style:none; 
    height:100px; 
} 

#midalign li { 
    float:left; 
    margin-right:30px; 
    width:100px; 
}

источник

2013-03-27 01:48:44 Jennift

вертикальное выравнивание текста в горизонтальном меню

ответ

Смежные вопросы