web-dev-qa-db-fra.com

Aligner verticalement une case à cocher

J'ai examiné les différentes questions concernant ce problème, mais je n'ai rien trouvé qui puisse fonctionner en raison des limites de mon balisage.

Mon balisage ressemble à tel (malheureusement, comme cela est généré par un backend, je suis incapable de changer le balisage).

<ul>        
    <li>
        <input type="checkbox" value="1" name="test[]" id="myid1">
        <label for="myid1">label1</label>
    </li>
    <li>
        <input type="checkbox" value="2" name="test[]" id="myid2">
        <label for="myid2">label1</label>
    </li>
</ul>

J'ai besoin que la case à cocher soit à droite et centrée verticalement dans le <li>

Actuellement, cela s'appelle:

li input{
   display: inline-block;
   float: right;
   margin-right: 10px;
}

J'ai essayé d'utiliser différentes valeurs pour vertical-align, mais cela ne semble pas aider. En outre, dans certains cas, l’étiquette peut être très longue et couvrir plusieurs lignes. La case à cocher aurait toujours besoin de pouvoir se centrer verticalement lorsque la hauteur du li est arbitraire.

Comment puis-je y parvenir?

csscheckboxvertical-alignment
40
F21

L'alignement vertical ne fonctionne que sur les éléments en ligne. Si vous le faites flotter, alors je ne pense plus qu'il soit traité comme faisant partie de ce flux d'éléments en ligne.

Faites de l'étiquette un bloc en ligne et utilisez un alignement vertical sur l'étiquette et l'entrée pour aligner leurs milieux. Ensuite, en supposant qu'il soit correct d'avoir une largeur spécifique sur les étiquettes et les cases à cocher, utilisez le positionnement relatif au lieu de flottant pour les permuter ( jsFiddle demo ):

input{
    width:20px;

    position:relative;
    left: 200px; 

    vertical-align:middle; 
}

label{  
    width:200px;       

    position:relative;
    left: -20px;

    display:inline-block;    
    vertical-align:middle; 
}
53
Supr

Ce n'est pas une solution parfaite, mais une bonne solution de contournement. 

Vous devez assigner vos éléments à se comporter comme table avec display: table-cell

Solution: Démo

HTML: 

<ul>        
    <li>
        <div><input type="checkbox" value="1" name="test[]" id="myid1"></div>
        <div><label for="myid1">label1</label></div>
    </li>
    <li>
        <div><input type="checkbox" value="2" name="test[]" id="myid2"></div>
        <div><label for="myid2">label2</label></div>
    </li>
</ul>

CSS: 

li div { display: table-cell; vertical-align: middle; }
11
Starx
<div>
    <input type="checkbox">
    <img src="/image.png" />
</div>

input[type="checkbox"]
{
    margin-top: -50%;
    vertical-align: middle;
}
0
Timothy Gonzalez

Cela fonctionne de manière fiable pour moi. Bordures et hauteur de cellule ajoutées pour plus de précision et d'effet:

.
.
.
<table>
   <tr>
     <td style="text-align:right; border: thin solid; height:50px">Some label:</td>
     <td style="border: thin solid;"><input type="checkbox" checked="checked" id="chk1" style="cursor:pointer; "><label for="chk1" style="margin-top:auto; margin-left:5px; margin-bottom:auto; cursor:pointer;">Check Me</label></td>
   </tr>
</table>
0
retiredcoder