Question

Say you’ve got two simple table cells next to each other.
One contains a radio button and text. The other one contains just text.

The radio button’s size is set to 16×16 pixels (don’t ask me why, assume that it just is).
The font size is 12 pixels.

How do you make both labels and the radio button to line up consistently in all major browsers along (or reasonably close to) the vertical middle of the table row?

Sample HTML to get you started:

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

In my installed versions of IE, Opera, Firefox and Chrome, the above renders like this

The result I’m expecting to see is the one displayed on that image by… …IE? Seriously?

The rest look close enough, but any attempts I made to line up the text made it always look awful in at least 2 of the 4 browsers.

Answer 1

Googling “vertical-align:middle” found this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render repectably in Chrome, IE, Firefox, Opera, and Safari.

What I did was add td{ line-height:1.5em } – see the link for explanation.