Alignement vertical d’une case à cocher

J’ai examiné les différentes questions concernant ce problème, mais je n’ai rien trouvé qui fonctionne en raison de limitations dans mon balisage.

Mon balisage ressemble à ça (malheureusement, comme cela est généré par un backend, je ne peux pas changer le balisage).

J’ai besoin que la case soit à droite et centrée verticalement dans le

  • 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 doit toujours pouvoir se centrer verticalement lorsque la hauteur du li est arbitraire.

    Comment puis-je y arriver?

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

    Faites de l’étiquette un bloc en ligne et utilisez un alignement vertical à la fois sur l’étiquette et sur l’entrée pour aligner leurs médiums. Ensuite, en supposant qu’il soit correct d’avoir une largeur spécifique sur les étiquettes et les cases à cocher, utilisez un positionnement relatif plutôt que flottant pour les échanger ( démo jsFiddle ):

     input{ width:20px; position:relative; left: 200px; vertical-align:middle; } label{ width:200px; position:relative; left: -20px; display:inline-block; vertical-align:middle; } 
  • Ce n’est pas une solution parfaite, mais une bonne solution de contournement.

    Vous devez atsortingbuer à vos éléments un comportement de table avec display: table-cell

    Solution: Démo

    HTML:

     

    CSS:

     li div { display: table-cell; vertical-align: middle; } 
     
     input[type="checkbox"] { margin-top: -50%; vertical-align: middle; } 

    faire une entrée pour bloquer et flotter, Ajuster la valeur supérieure de la marge.

    HTML:

     
    luke..

    CSS:

     /* change margin-top, if your line-height is different. */ input[type=checkbox]{ height:18px; width:18px; padding:0; margin-top:5px; display:block; float:left; } .label{ border:1px solid red; } 

    Démo