Вертикально выравнивать текст в диапазоне с фиксированной шириной и высотой

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

Во-первых, не используйте дубликат удостоверения личности (#), а затем измените 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>

Это результат: