垂直對齊固定寬度和高度的跨度中的文本

Question

我有一個固定寬度和高度的跨度，但其中的文本長度不固定，可以是單個單詞，也可以是非常長的。我如何始終將文本垂直對齊到跨度中間？例如，在我的http://jsfiddle.net/w2cfkocv/1/中，第二個跨度只包含1個字，但我希望它在垂直跨度的中間對齊。謝謝。

<table summary="dialogTitle" class="pageTitle"> 
<tr> 
    <td style="">   
     <span id="headertitle"> title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </span><br> 
     <span id="headertitle"> title </span> 
    </td> 
</tr> 

#headertitle { 
    border: 1px solid #000; 
    font-size:14px; 
    color:#000000; 
    font-weight:bold; 
    width:200px; 
    height:100px; 
    line-height: 25px; 
    display:inline-block; 
    overflow:hidden; 
    float: left; 
    word-wrap: break-word; 
    vertical-align: middle; 
} 

Answer 1

先不要使用重複的ID（＃），然後改變你的display:inline-block到display:table-cell

這裏是一個片段：

.headertitle { 
 
    border: 1px solid #000; 
 
    font-size: 14px; 
 
    color: #000000; 
 
    font-weight: bold; 
 
    width: 200px; 
 
    height: 100px; 
 
    line-height: 25px; 
 
    display: table-cell; 
 
    word-wrap: break-word; 
 
    vertical-align: middle; 
 
}

<table summary="dialogTitle" class="pageTitle"> 
 
    <tr> 
 
    <td style=""> 
 
     <span class="headertitle"> title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title </span> 
 
     
 
     <span class="headertitle"> title </span> 
 
    </td> 
 
    </tr> 
 
</table>

這是結果：