Centrer verticalement les boutons radios dans formulaire

Bonjour
Je souhaiterais aligner verticalement les boutons radios dans mon formulaire afin qu'ils soient bien les uns en dessous des autres et que cela fasse propre;
Cependant je ne sais pas quoi mettre dans ma feuille CSS

<label for"alarme_intrusion"> Alarme intrusion 
          <input  type="radio"class="choix" name="choix" value="" /> </label> <br />
          <label for="chauffage"> Chauffage 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />
          <label for"electricite"> Electricité 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />
          <label for"alarme_incendie"> Alarme incendie   
          <input  type="radio" class="choix" name="choix" value=""/> </label> <br />
          <label for"informatique"> Informatique 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />
          <label for="eau"> Eau 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />
          <label for"peinture"> Peinture 
          <input  type="radio" class="choix"name="choix" value="" />  </label> <br />
          <label for"serrurier"> Serrurier 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />
          <label for"electroménager"> Electroménager 
          <input  type="radio" class="choix"name="choix" value="" /> </label> <br />



            <button id="submit" class="button">Modifier</button> 
            <button id="submit" class="button"> Annuler</button> 
      </form>
      </fieldset>   
            <div class="clear"> </div> 
            </div> 
            </div 

et voici mon code CSS

input, textarea, button {
	/*background:url(./images/bg/15.png);*/
	clear:both;
	
	font-style:italic;
	margin-bottom:1px;
	padding:10px
}


.nom{
	width:97.5%;
}
.adress{
	width: 97.5%;
}
.zip_code{
	width: 97.5%;
}
.city{
	width: 97.5%;
}
.mail{
	width: 97.5%;
}
.phone{
	width:97.5%;
}
.fax{
	width:97.5%;
}

input.choix{
	

}

tiens, mais le code est moche

JENCAL a écrit :
tiens, mais le code est moche

Bonjour

merci mais je souhaites que les boutons soient alignés verticalement mais aussi que les boutons soient bien en face du texte

bonjour,
Une autre solution peut être...

<form>
  <label  > Alarme intrusion </label>
  <input  type="radio"class="choix" name="choix" value="" /> <br />
  <label for="chauffage"> Chauffage </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for"electricite"> Electricité </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for"alarme_incendie"> Alarme incendie </label>  
  <input  type="radio" class="choix" name="choix" value=""/><br />
  <label for"informatique"> Informatique </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for="eau"> Eau </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for"peinture"> Peinture </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for"serrurier"> Serrurier </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
  <label for"electroménager"> Electroménager </label>
  <input  type="radio" class="choix"name="choix" value="" /><br />
</form>

        form{width: 100%;}
	label{ width: 150px;}
	label,.choix{display: inline-block;vertical-align: top;}

merci beaucoup sa fonctionne
Je vous embête encore une der,nière fois, comment faire pour faire deux colonnes l'une à coté de l'autre avec ces boutons radios ? Histoire qu'il y est un bloc à gauche et un bloc à droite

Nestate a écrit :
merci beaucoup sa fonctionne
Je vous embête encore une der,nière fois, comment faire pour faire deux colonnes l'une à coté de l'autre avec ces boutons radios ? Histoire qu'il y est un bloc à gauche et un bloc à droite

bootstrap

mais c'est brute... j'utiliserais bootstrap même pour une seul div tellement c'est pratique.

J'ai pas très bien compris ta dernière demande, mais tu le inline block tu peux l'appliquer à deux div contenant tes radios..
Modifié par JENCAL (30 Mar 2016 - 15:44)

simplement faire deux colonnes une qui s'arrête à informatique sur la gauche et une autre avec le reste sur la droite

Comme je t'ai dit,il faut faire avec deux div séparer et tu joues avec float left/right

label+radio dans un fieldest qui est en inline-block(Meme principe que l'exemple precedent).
Et tu gere les "width" des fieldset en % (moitié-moitié).
Et tu peux les centrer par rapport au contenair parent (form) avec margin: 0 auto ou text-align:center

<fieldset>
	<label  > Alarme intrusion </label>
	<input  type="radio"class="choix" name="choix" value="" />
</fieldset>

un peu de lecture sur alsacreations:

Display inline-block, une valeur trop peu utilisée

display: inline-block et les espaces indésirables

<fieldset> (developer.mozilla.org)
Modifié par BYJMG (30 Mar 2016 - 16:23)

Bonjour,

Nestate a écrit :
simplement faire deux colonnes une qui s'arrête à informatique sur la gauche et une autre avec le reste sur la droite

Voir peut-être juste les colonnes en CSS3 ?

merci pour vos réponses j'ai trouvé ma solution