Centrer une <table> verticalement dans un page
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 :cry:
margin-top: 50%
margin-bottom: 50%
pas mieux :cry: !
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
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> |
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
| 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%;
} |
Quelqu'un a-t-il déjà eu à faire à ce problème, ou bien connais aurait une solution ? :calim2:
Merci !
