Vertically align text after div

Question

I'm building an html bar graph using tables and nested divs and want to display the % as text immediately following the div bar.

I'm having a real problem centering this text vertically with the div - I've tried messing with vertical-align/line-height and various display options but to no avail. Can anyone point me in the right direction? I need a general solution - no absolute positioning.

The html:

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

The 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

do it different like

span {
    vertical-align: top;
}

Demo.

Or do

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

Demo.

Answer 2

vertical-align: top;

would be the css rule youd add there

Answer 3

Above all answer are perfect, Also your HTML is ok just add

span {
        vertical-align: middle; /* As per your code */
        float:right;      /* This for span alignment */
        line-height:25px; /* This for center text */
     }

Answer 4

Try this:

vertical-align: text-top;