Centrer le contenu d'un formulaire [Résolu]

[gege765]

Bonsoir,

Voilà je souhaite centrer verticalement une partie d'un formulaire (le bloc rouge) par rapport au bloc bleu (fieldset) comment faire ?

Actuellement voici mon code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form action='traitement.php' name='choix' class='cmxformR' id='frm_rech' method='post'>
			<fieldset>
				<legend>Recherche rapide par nom ou adresse </legend>
				<p>
					<input type='radio' name='choixRech' value='Nom' checked='checked'>
					<label for='nom'>Nom</label>
					<select name='nom[]' id='nom' size='4' multiple>
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<input type="radio" name='choixRech' value='ip'>
					<label for='ip'>Adresse IP</label>
					<select name='ip[]' id='ip'size='4' multiple class="required">
						<option value='10.0.0.0'>10.0.0.0</option>
						<option value='10.0.0.2'>10.0.0.2</option>
						<option value='10.0.0.5'>10.0.0.5</option>
						<option value='10.0.0.7'>10.0.0.7</option>
						<option value='10.0.0.9'>10.0.0.9</option>
						<option value='10.0.0.11'>10.0.0.11</option>
						<option value='10.0.0.15'>10.0.0.15</option>
					</select>
				</p>
				<p>
					<input class='submit' type='submit' value='Afficher'>
				</p>
			</fieldset>
		</form>

et mon css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
html, body {
	font-family: ARIAL,GENEVA,VERDANA;
	width: 100%;
	height: 100%;
}
form.cmxformR {
	padding: 10px;
	width: 400px;
	font-size: 1.0em;
	color: #333;
	margin: auto;
}
form.cmxformR fieldset {
	border: 1px solid #377ca5;
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
}
form.cmxformR fieldset p {
	padding: 5px 10px 1px 15px;
}
form.cmxformR legend {
	font-weight:bold;
}
form.cmxformR select {
	vertical-align:middle;
	display: block;
	width: 250px;
}
input { 
	background:#FFF;
	vertical-align:middle;
}
input[type=submit], input[type=reset] {
	border:1px solid;
	font-weight:bold;
	cursor:pointer;
}
input[type=submit]:hover, input[type=reset]:hover {
	background-color:#377ca5;
}
input[type=submit]:active, input[type=reset]:active {
	background-color:#000;
	color:white;
}
option,select {
	background-color:#ffffff;
}
option,select:hover{
	background-color:#e3f9ff;
}

Résultat actuel :


Résultat souhaité :

[NoSmoking]

Bonsoir,
tu n'as qu'à jouer avec le padding (marge intérieure) du FIELDSET

• FIELDSET width de 400px
• SELECT width de 250px
• (400-250)/2 = 75px
• FIELDSET padding = 75px

[gege765]

Merci.
Je ne sais pas pourquoi je n'y ai pas pensé.
Bonne journée.