CSS: текст по центру по вертикали с одним контейнером фиксированной ширины и плавным текстом

Question

У меня проблемы с поиском правильного решения для этой полностью изменчивой компоновки. Я хочу, чтобы подзаголовок в следующих скриптах был выровнен по центру по вертикали рядом со значком. Подзаголовок может разбиваться на несколько строк в зависимости от размера браузера (и разной длины текста).

У меня подготовлены две скрипки - первая попытка - мой предпочтительный подход, так как я более тщательно протестировал похожие макеты:

http://jsfiddle.net/mmDFC/

Вторая скрипка, это попытка в той же ситуации с использованием display:table-cell;, но я не смог исправить потерянное правильное выравнивание текста, и я также никогда не проверял IE6 +, совместимый с этим дисплеем. Тип:

http://jsfiddle.net/mmDFC/1/ (это почти работает, за исключением потери text-align:right;)

Я просмотрел множество вопросов с таким же названием, но не смог найти то, что хотел, поэтому хороший ответ указывает на пропущенный вопрос или нашел решение для вышеуказанного.

Все во имя текста, выровненного по вертикали ...: /

---

Обновление браузера: я возился с Chrome, я вижу, что IE8 ведет себя аналогично, но Ffox3 ведет себя по-разному для решения 2.

Answer 1

Если я правильно понимаю, что вы хотите, вам просто нужно добавить display:table к h2

<div class="wrapper clearfix">
    <h1>Main Title</h1>
    <h2>
        <span id="fluid">
            Fluid Span
        </span>
        <span id="icon">
            Lots of long text...
        </span>

    </h2>
</div>

.clearfix:after {
    content:"";
    display:block;
    clear:both; 
}
h2 {
    float:right;  
    text-align:right; 
    background-color:#999;
    display:table;
    width:43%;
}
span {
    background-color:#ccc;   
    border:1px #000 solid;
    vertical-align:middle;
}
span#fluid {
    display:table-cell;

    height:100%;

}

span#icon { 
    display:table-cell;
    width:60px;
    height:40px;
}

http://jsfiddle.net/thomas4g/WecP4/28/

Дайте мне знать, если это не такто, что ты хочешь.