Html 文本的垂直对齐

这是我的问题的图像：。 我想问你，如果你知道如何在蓝色框中的中心，在绿色的中间。因此，如果绿色框中的文本较长，我想把中间标题的数目放在文本的中间。代码如下：

<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>

嘿，现在你可以用了

显示：表格单元格；在你的课文课上

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;



}

---

实时演示

我将您的代码放入css span.text中的文本类{宽度：200px；背景：绿色；垂直对齐：中间；浮动：右侧；显示：内联块；垂直对齐：中间；}