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 :
et mon 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
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>
Résultat actuel :
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
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 souhaité :
Partager