在宽度和高度固定的范围内垂直对齐文本

Question

I have a span with fixed width and height, but the length of the text inside it is not fixed, which can be either a single word or very long. How can I always vertically align the text to the middle of the span? For example, in my http://jsfiddle.net/w2cfkocv/1/ , the second span only contains 1 word, but I want it to align in the middle of the span vertically. Thanks.

<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

First don't use duplicate ID's(#) , and then change your display:inline-block to display:table-cell

here is a snippet:

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

This is the result: