Discussion :

[jeepibmx]

Bonjour, je cherche comment faire pour aligner ma liste de radio button au centre de ma page..

Quand je met un text-align: center; mes radios sont au centre mais pas aligner..

Est-ce possible de les mettres au centre et d'aligner mes radios buttons sans ajouter une marge de gauche ?

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
div#formulaire {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	width: auto;
}

** Sur l'image on peut voir que les radio ne sont pas aligner au centre mais ses seulement une erreur quand j'ai pris mon image..

[HiRoN]

Salut,

Avoir la totalité du code (X)HTML & CSS relatif au bloc en question aiderait sûrement...

[jeepibmx]

ok le voici :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="conteneur">
 
     <div id="formulaire">
					<input name="form" type="radio" value="radio1">radio 1
					<br>
					<input name="form" type="radio" value="radio2">radio 2 avec un text un peu plus long
     </div>
 
</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
div#conteneur {
	margin-top: 8px;
  	margin-left: auto;
  	margin-right: auto;
  	width: 820px;
  	text-align: left;
	background-color: gray;
        color: #FFFFFF;
	font-size: 18px;
}
 
div#formulaire {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	width: auto;
}

[desert]

Bonjour,
comme tes marges gauche et droite sont déjà en auto, il te suffit simplement d'indiquer à ton div#formulaire une largeur plus petite que son div parent.
Soit en % avec une valeur plus petite que 100%, soit en px avec une valeur plus petite que 820px.

[jeepibmx]

ça ne semble pas rêgler le problème d'alignement des radios.. il sont au centre mais pas alignés..

[Ethyde]

Ajoute text-align :left; au style de div#formulaire afin que tes input s'aligne a gauche. Te resteras à jouer sois sur le margin des input, soit sur la largeur de la div#formulaire