CSS Вертикально центрирование текста в поплавке на навигационную панель

Question

Я пытаюсь создать панель навигации в HTML + CSS, которая выглядит как изображение в следующей ссылке:

http://i.imgur.com/5PEhv.png

В принципе у меня есть некоторые большой текст в левом плавающем прямоугольнике/div в сером цвете и список ссылок в меньшем шрифте в прямоугольном прямоугольнике/div справа, и я хотел бы, чтобы этот текст был центрирован по вертикали, не прибегая к избавлению от поплавков и корректировке margin-left/margin-right из серых и красных квадратов. Возможно ли это, и если да, то как это можно сделать?

Answer 1

Похоже, что текст в div должен быть вертикальным.

Трюк заключается в следующем.

Пусть следующий HTML:

<div id="parent"> 
<p id="child"> text</p> 
</div> 

Теперь вы можете вертикально выравнивать текст, делая следующий трюк.

#parent{ 
    display: table; 
    .... 
} 

#child{ 
    display: talble-cell; 
    vertical-align: center; 
} 

Выполнение этого результата приводит к следующему результату.

Answer 2

Если вы знаете высоту красного контейнера, то его легко. Дайте HTML следующим образом:

<div class="red"> 
    <a href="Home">Home</a> 
    <a href="...">...</a> 
    <a href="etc.">etc.</a> 
</div> 

И CSS в качестве:

.red {line-height: 50px; vertical-align: middle; background: #f00; font-family: tahoma, sans-serif; text-align: center; font-size: 11px; font-weight: bold;} 
.red a {color: #fff; text-decoration: none;} 

проверить это fiddle! Надеюсь, поможет! :)