Search code examples
csshtmlvertical-alignment

Vertically align text after div

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/

Solution

  • do it different like

    span {
    vertical-align: top;
}

    Demo.

    Or do

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

    Demo.