垂直对齐具有固定宽度和高度的跨度中的文本

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>

这是结果：