垂直对齐的文字

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/