Aligner img checkbox et label

Bonjour;

J'ai une liste de la forme

<ul class="bigre">
<li><img src="uploads/formbrods/1-theme-bro.png" alt="garniture" width="70" height="70"><input type="checkbox" class="cms_checkbox" name="ax01" value="1" id="bx01">
<label for="fbrp__38_1_0">Poires</label></li>
<li><img src="uploads/formbrods/2-theme-bro.png" alt="garniture" width="70" height="70"><input type="checkbox" class="cms_checkbox" name="ax02" value="1" id="cx01">
<label for="fbrp__38_1_0">pomme</label></li>
<li><img src="uploads/formbrods/3-theme-bro.png" alt="garniture" width="70" height="70"><input type="checkbox" class="cms_checkbox" name="ax03" value="1" id="dx01">
<label for="fbrp__38_1_0">Pêches</label></li>
</ul>

Je sais que la structure n'est pas bonne et que l'input devrait être à l'intérieur de la balise label, malheureusement c'est généré par un module et je n'ai pas la possibilité de le modifier.
Cette liste comporte 11 éléments.
J'affiche cette liste sur 2 colonnes avec le CSS suivant:

.bigre {column-width: 50%;column-count:2}

Pas de problème, cela fonctionne parfaitement. Je cherche maintenant à aligner horizontalement l'image, la checkbox et le label.
J'ai tout tenté de l'inline au float left, rien n'y fait...
Si quelqu'un a l'ombre d'une idée... Je parviens à mes fins en créant un tableau d'une ligne et trois colonnes mais bon..ce n'est pas sérieux.
Pourtant, comme dirait l'autre j'en mange depuis un petit moment des css mais là...
Modifié par ditick (27 Mar 2020 - 14:45)

Bonjour
As tu essayé de mettre un vertical-align:middle sur l'image

Tu dis :
"l'input devrait être à l'intérieur de la balise label"
Ce n'est pas un règle obligatoire du moment que ton label à un attribut for qui pointe sur l'id du champ au quel il est lié, les 3 codes ci-dessous sont si je ne trompe pas bon :

<input type="checkbox"  id="dx01"> <label for="dx01">Pêches</label>

 <label for="dx01">Pêches <input type="checkbox"  id="dx01"></label>

 <label>Pêches<input type="checkbox"  id="dx01"></label>

Modifié par aliasdmc (29 Mar 2020 - 10:49)