Radio/case à cocher alignement en HTML/CSS

Question

Quelle est la façon la plus propre à aligner correctement les boutons radio / cases à cocher avec le texte? La seule solution fiable qui j'ai été en utilisant la mesure de la table de base:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Cela peut être désapprouver par certains. J'ai juste passé un peu de temps (encore une fois) d'enquêter sur un tableless solution, mais a échoué. J'ai essayé différentes combinaisons de flotteurs, absolu/relatif de positionnement et des approches similaires. Non seulement qu'ils comptaient en silence sur une hauteur estimée de l'boutons radio / cases à cocher, mais ils se sont comportés différemment dans les différents navigateurs. Idéalement, j'aimerais trouver une solution qui ne permet pas de supposer quoi que ce soit à propos des tailles ou navigateur spécial bizarreries. Je suis très bien avec l'aide de tables, mais je me demande où il y a une autre solution.

Answer 1

Je crois que j'ai enfin résolu le problème. Communément solution recommandée consiste à utiliser vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

Le problème, cependant, est que ce produit encore visible désalignements même pensé qu'il devrait théoriquement travail. La spécification CSS2 dit que:

vertical-align: middle: Aligner la verticale du milieu de la boîte avec la ligne de base du parent de la boîte de plus de la moitié de la hauteur d'x de la mère.

Il devrait donc être dans la parfaite centre (x hauteur est la hauteur de la lettre x). Cependant, le problème semble être causé par le fait des navigateurs couramment ajouter quelques aléatoire inégale des marges des boutons radio et des cases à cocher. On peut vérifier, par exemple dans Firefox à l'aide de Firebug, que la case à cocher par défaut la marge de Firefox est 3px 3px 0px 5px. Je ne sais pas d'où il vient, mais les autres navigateurs semblent avoir les mêmes marges. Afin de les obtenir un alignement parfait, on a besoin de se débarrasser de ces marges:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Il est encore intéressant de noter que dans le tableau de la solution basée sur les marges sont en quelque sorte mangé et tout est conforme.

Answer 2

J’ai trouvé la meilleure et la plus simple façon de le faire est celui-ci, parce que vous n’avez pas besoin d’ajouter des étiquettes, des divs ou que ce soit.

``

Answer 3

Je n’utiliserais tables pour cela du tout. CSS pouvez le faire facilement.

Je ferais quelque chose comme ceci :

Remarque : J’ai utilisé la classe clearfix de : http://www.positioniseverything.net/easyclearing.html

Answer 4

Il s’agit d’un peu d’un hack mais ce CSS semble faire fonctionner très bien dans tous les navigateurs, le même que l’utilisation des tables (en dehors de chrome)

Assurez-vous que vous utilisez des étiquettes avec vos radios pour elle de travailler. c'est-à-dire