HTML alignment of radio buttons and text

Question

Let's say you have two simple table cells next to each other.
One contains a radio button and text. The other contains only text.

The size of the radio button is set to 16x16 pixels (don't ask me why, suppose it's easy).
The font size is 12 pixels.

How to make both the labels and the switch switch sequentially in all major browsers along (or close enough) the vertical middle of the table row?

HTML sample to get 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>

My installed versions of IE, Opera, Firefox and Chrome above show that this

The result that I expect to see is the one that is displayed on this image using ...... IE? Seriously?

, , , , , , 2 4 .

Answer 1

Googling "vertical-align: middle" Gavin Kistner, . , , , Chrome, IE, Firefox, Opera Safari.

, , td{ line-height:1.5em } - . .

Answer 2

, font-size:12px; td width:16px;height:16px; .

2 :

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}

Answer 3

<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

.

Answer 4

- ( ).

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

Answer 5

:

• ? , , .
• vertical-align:middle; td .radio? - , ...