Bonjour,
Je fais actuellement un écran de connexion, et donc ma zone où se situe mon formulaire, login/password/boutons est une table HTML.
Pour la centrer horizontalement pas de problème je fais un :
margin: 0 auto.
Mais pour la centrer verticalement impossible, j'ai essayé un :
vertical-align: middle
sur ma table mais rien n'y fais![]()
margin-top: 50%
margin-bottom: 50%
pas mieux!
HTML :
CSS :
Code html : 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 <form name="Login" method="POST" Action="TRYLOGIN.LOGIN"> <table class="connexion"> <tr> <td COLSPAN=3 id="td_entete"> </td> </tr> <tr class="ligne1"> <td id="login-logo"> </td> <td id="login-txtbox"> </td> <td> </td> </tr> <tr> <td id="password-logo"> </td> <td id="password-txtbox"> </td> <td id="caution-password"> </td> </tr> <tr class="ligne3"> <td> </td> <td id="connexion-button"> </td> <td> </td> </tr> <tr class="ligne4"> <td COLSPAN=3 id="panel-deleg"> </td> </tr> </table> </form>
Quelqu'un a-t-il déjà eu à faire à ce problème, ou bien connais aurait une solution ?
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 table, td { margin: 0 auto; text-align:center; } .connexion { border-collapse: collapse; border: 0.3em solid #c2c3ea; background-color: #fff; max-width: 31em; min-width: 24em; box-shadow: 0px 0px 0.4em #fff; position: relative; z-index: 3; } .connexion #td_entete { padding: 0; font-size: 1.3em; color: #F2F2F2; background-color: #464B9D; border-bottom: 0.15em solid #c2c3ea; } .ligne1, .ligne3 { height: 6.5em; } .connexion #login-txtbox, #password-txtbox { width: 50%; }
Merci !
Partager