HTML - alignement des boutons radio et du texte

Question

Disons que vous avez deux cellules de tableau simples l'une à côté de l'autre.
Un contient un bouton radio et du texte. L'autre contient juste du texte.

La taille du bouton radio est réglée sur 16x16 pixels (ne me demandez pas pourquoi, supposons que ce soit le cas).
La taille de la police est de 12 pixels.

Comment faire en sorte que les étiquettes et le bouton radio soient alignés de manière cohérente dans tous les principaux navigateurs le long (ou raisonnablement proches) du centre vertical de la ligne du tableau?

HTML Exemple pour vous lancer:

<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> 

Dans mes versions installées de IE, Opera, Firefox et Chrome, le rend ci-dessus comme this

Le résultat que je attends de voir est la un affiché sur cette image par ... ... IE? Sérieusement?

Le reste semble assez proche, mais toutes les tentatives que j'ai faites pour aligner le texte le rendait toujours horrible dans au moins 2 des 4 navigateurs.

Answer 1

Googling "vertical-align: milieu" trouvé this short explanation par Gavin Kistner, qui est utile. J'ai essayé la dernière suggestion sur cette page, qui semble afficher de manière significative dans Chrome, IE, Firefox, Opera et Safari.

Ce que j'ai fait était d'ajouter td{ line-height:1.5em } - voir le lien pour l'explication.

Answer 2

Une façon d'y arriver serait d'ajouter une table imbriquée à la première de vos deux cellules, et de mettre le bouton radio et première travée dans deux cellules (dans le tableau imbriqué)

<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 3

coups rapides dans l'obscurité:

• Donnez à l'élément d'entrée radio sa propre cellule de tableau? Au moins, le texte devrait s'aligner les uns avec les autres.
• Mettez vertical-align:middle; à td au lieu de .radio? Peut encore causer des problèmes, parce que la ligne de base du texte dans la cellule avec l'élément d'entrée radio peut encore être déterminée par l'élément d'entrée ...

Answer 4

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

Pourquoi ne pas mettre le texte dans son propre colonne.

Answer 5

Une solution rapide est de rendre égaux le font-size:12px; du td et le width:16px;height:16px; de la radio.

deux exemples:

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

et

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