css - 在 div 之后垂直对齐文本

Question

我正在使用表格和嵌套的 div 构建一个 html 条形图，并希望将 % 显示为紧跟在 div 条之后的文本。

我在将此文本与 div 垂直居中时遇到了一个真正的问题 - 我试过弄乱 vertical-align/line-height 和各种显示选项，但无济于事。谁能指出我正确的方向？我需要一个通用的解决方案 - 没有绝对定位。

html:

<table>
  <tr>
    <td>
      Choice A
      <br>
      <div class="full">
        <div class="a"></div>
      </div>
      <span>50%</span>
    </td>
  </tr>
</table>

CSS:

td {
  text-align: left;
}
.full {
  background-color: grey;
  width: 250px;
  height: 25px;
  display: inline-block;
  line-height: 25px;
}
.a {
  background-color: red;
  width: 50%;
  height: 100%;
}
span {
  vertical-align: middle;
}

http://jsfiddle.net/2n9aL/

Answer 1

做不同的事

span {
    vertical-align: top;
}

Demo .

或者做

span {
    line-height: 25px;
    vertical-align: top;
}

Demo .