Вертикально выравнивать несколько строк текста (элементы меню)?

Я пытаюсь вертикально выровнять текст внутри UL. Проблема в том, что некоторые элементы списка имеют более одной строки текста и поэтому не могут использовать высоту строки.Вертикально выравнивать несколько строк текста (элементы меню)?

скрипку: http://jsfiddle.net/jaAYT/

Вот результат я хочу добиться: http://img402.imageshack.us/img402/7979/menuor.jpg

Вот мой HTML:

<ul class="menu"> 
    <li> <a href="#"><span>WHAT IS TEAM X?</span></a> </li> 
    <li> <a href="#"><span>COMPANY BENEFITS</span></a> </li> 
    <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li> 
    <li> <a href="#"><span>TEAM X COVERAGE</span></a> </li> 
    <li> <a href="#"><span>COMPANY2 </span></a> </li> 
    <li> <a href="#"><span>COMPANY3 </span></a> </li> 
    <li> <a href="#"><span>LATEST CAMPAIGNS</span></a> </li> 
    <li> <a href="#"><span>CONTACT</span></a> </li> 
</ul>

Вот CSS:

.menu { 
    float: left; 
    margin: 0px 0px 0px 0px; 
    width: 720px; 
} 
.menu li { 
    float: left; 
    position: relative; 
} 
.menu li a { 
    width: 86px; 
    height: 52px; 
    padding: 15px 0px 15px 4px; 
    display: block; 
    float: left; 
    color: #fff; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    background-color: #ccc; 
} 
.menu li a:hover { 
    background-color: #000; 
}

Спасибо! Cris

источник

2011-06-12 Cris

Как вы хотите по вертикали выровнять их (например, сверху, в центре, снизу)? – melhosseiny

Я хочу их по центру. Я добавил фотографию, чтобы описать, что я хочу: http://img402.imageshack.us/img402/7979/menuor.jpg – Cris

Добавьте эти заявления к .menu li a правилу:

display: -webkit-box; 
display: -moz-box; 
display: box; 
-webkit-box-align: center; 
-moz-box-align: center; 
box-align: center;

См обновленный fiddle.

08/14/13 См. Это answer для синтаксиса.

источник

2011-06-12 18:55:59 melhosseiny

Работает красиво! Он вертикально выровнен по середине, насколько мне это нужно. Ты спас меня так много времени! Что касается другого комментария: ему просто нужно «text-align: center», чтобы текст был посередине. Еще раз спасибо! – Cris

Я проверил и работает только в Chrome. Firefox, Opera и IE не делают это правильно? Какие-либо предложения? Благодарю. – Cris

Немного безответственно предложить Flexbox, не указав поддержку браузера: http://caniuse.com/flexbox (* почему я это говорю?) Http://stackoverflow.com/questions/6342755/how-to-vertically -center-more-than-one-line-of-text-works-only-on-chrome) – thirtydot

Вот updated fiddle

источник

2011-06-12 18:22:36

Я думаю, он имел в виду, что текст внутри должен быть закреплен горизонтально, так что это похоже на такая же линия/ряд! – Jawad

Да, вот что я имею в виду; Я хочу, чтобы текст внутри был выровнен по вертикали из-за путаницы. Вот изображение того, что я хочу: http://img402.imageshack.us/img402/7979/menuor.jpg – Cris

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

.oneLine {display:block; padding-top:1.25em;} 
.twoLines {display:block; padding-top:.75em;} 

<ul class="menu"> 
    <li> <a href="#"><span class="twoLines">WHAT IS TEAM X?</span></a> </li> 
    <li> <a href="#"><span class="twoLines">COMPANY BENEFITS</span></a> </li> 
    <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li> 
    <li> <a href="#"><span>TEAM CYCAD COVERAGE</span></a> </li> 
    <li> <a href="#"><span class="oneLine">COMPANY2 </span></a> </li> 
    <li> <a href="#"><span class="oneLine">COMPANY3 </span></a> </li> 
    <li> <a href="#"><span class="twoLines">LATEST CAMPAIGNS</span></a> </li> 
    <li> <a href="#"><span class="oneLine">CONTACT</span></a> </li> 
</ul>

http://jsfiddle.net/jasongennaro/4MWTj/

источник

2011-06-12 18:54:13

Вертикально выравнивать несколько строк текста (элементы меню)?

ответ

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