Вертикальное выравнивание текста

Question

Вот изображение моей проблемы: http://i48.tinypic.com/2roszr9.jpg. Я хочу спросить вас, знаете ли вы, как центрировать номер в синей коробке, чтобы быть посередине зеленого. Поэтому, если текст в зеленом поле длиннее, я хочу, чтобы центр номера заголовка был посередине этого текста. Вот код:

<style> 
.right-content-text { 
    width: 235px; 
} 
.right-content-text p { 
    background: red; 
    float: left; 
    width: 235px; 
    height: auto; 
} 
span.index { 
    background: blue; 
    width: 35px; 
    float: left; 
    text-align: center; 
    font-size: 14px; 
    color: #373A40; 
    font-weight: bold; 
} 
span.text { 
    width:200px; 
    background: green; 
    vertical-align:middle; 
    float: right; 


} 
span.text a { 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: normal; 
    color: #373A40; 

} 
</style> 
<div class="right-content-text"> 
    <p><span class="index">2.</span><span class="text"><a href="#">Lorem ipsum dolor sit amet</a></span><div class="clear"></div></p> 
    <p><span class="index">3.</span><span class="text"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></span><div class="clear"></div></p> 
    <p><span class="index">4.</span><span class="text"><a href="#">Pellentesque aliquet pulvinar tortor, sed pretium nisl mollis eget. </a></span><div class="clear"></div></p> 
    <p><span class="index">5.</span><span class="text"><a href="#">Fusce vestibulum molestie quam, et lacinia nibh egestas quis.</a></span><div class="clear"></div></p> 
</div> 

Answer 1

Эй вы можете использоваться

display: table-cell; в текстовом классе.

span.index { 
    background: blue; 
    width: 35px; 
    display:table-cell; 
    vertical-align:middle; 

    text-align: center; 
    font-size: 14px; 
    color: #373A40; 
    font-weight: bold; 
} 
span.text { 
    width:200px; 
    background: green; 
    display:table-cell; 
    vertical-align:middle; 



} 

Живая демоhttp://jsfiddle.net/EHM5p/