Comment faire pour aligner verticalement un bouton radio contre une image en html?

Question

J'ai plusieurs images de 100x100. Je demande à l'utilisateur de choisir l'un d'eux en mettant un bouton radio devant chacun d'eux.

Voici le code:

<div> 
    <input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/> 
    <input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/> 
    .... 

et ainsi de suite ... Mais le problème est que le bouton radio rend au bas de la ligne et je veux le faire venir au milieu de la verticale image. J'ai essayé style="vertical-align:middle" et cela ne fonctionne pas.

Des idées?

Answer 1

<div style="width=define_your_image_container_width_here"> 
    <div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div> 
    <div style="float:right;"><img src="pic01.jpg"/></div> 
</div> 

Answer 2

Lorsqu'il est appliqué à des éléments en ligne, vertical-align indique où aligner une certaine partie de l'élément enfant à une partie correspondante de la zone de ligne de la mère. Par exemple, "middle" aligne grossièrement les parties médianes de chacun. Si vous souhaitez aligner deux frères et sœurs, vous devez appliquer le même alignement vertical aux deux, sinon l'élément s'alignera sur la ligne de base du parent.

<style type="text/css"> 
    input[type="radio"], input[type="radio"]+label img { 
    vertical-align: middle; 
    } 
</style> 

<ul> 
    <li> 
    <input type="radio" name="pic" id="pic1" value="1" /> 
    <label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label> 
    </li> 
    <li> 
    <input type="radio" name="pic" id="pic2" value="2" /> 
    <label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label> 
    </li> 
</ul> 

Answer 3

En plus de la réponse précédente, le bouton radio doit avoir la même hauteur réelle que l'image pour que cela fonctionne. En réalité, je veux dire qu'il doit correspondre à la hauteur, le rembourrage, la marge et la bordure.