Discussion :

[narvik]

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 :

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>

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
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 ?

Merci !

[NoSmoking]

Bonjour,
tu as toujours la possibilité de faire une recherche et de tomber sur
Comment centrer verticalement un élément block ?

[narvik]

Merci mais ça ne m'a pas spécialement éclairé !
A savoir que je code en HTML CSS depuis seulement 2 mois !

[narvik]

Il ne faut pas que j'utilise une table ?
Il faut que je place tout cela dans une div avec un display:cell-table ?

L'avantage du tableau c'est que ça me permettait de placer mes labels, textbox, et boutons facilement !

Je suis un peu perdu pour régler mon problème !

[NoSmoking]

Tu n'as effectivement pas besoin de TABLE pour régler ton problème, le positionnement des différents éléments pouvant s'ajuster en CSS.