垂直對齊的文字

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/