Centrage et cadrage div complexe

Bonjour,

je n'arrive pas à centrer verticalement et horizontalement une div.

j'ai essayé plein de chose mais ça bouge pas ....

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
html, body { margin:0; padding:10px; font:normal 100%/1.5em "Segoe UI", verdana, helvetica, arial,sans-serif; text-align:justify; vertical-align:central }
form        {
	clear: both;
	overflow: hidden;
	margin: 0 auto 2em;
	padding: 6px;
	width: 450px;
	border: none;
	-moz-border-radius: 11px;
	-khtml-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	color: #000000;
	font: normal 100% "Segoe UI", verdana, helvetica, arial,sans-serif;
	-moz-box-shadow: #666 0 0 18px;
	-webkit-box-shadow: #666 0 0 18px;
	-khtml-box-shadow: #666 0 0 18px;
	box-shadow: #666 0 0 18px;
	background-color: #FFFFFF;
	top: 120px;  	   
}
 
form label  {
	display: block;
	margin: 0;
	padding: 0;
	font: bold 120% georgia, serif;
	color: #333333;
	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
form em     { display:block; margin:.3em auto; background:transparent; color:#999999; text-align:center; font-weight:bold; clear:both; }
form input,
form button { margin:.3em 0; padding:3px 5px; border: 1px solid #e5e5e5; -moz-border-radius:5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font:bold 100% "Segoe UI", verdana, helvetica, arial,sans-serif; text-align:center;  text-shadow:0 1px 0 rgba(0,0,0,0.25);}
form input  { float:left; width:330px; background:#fff; color:#666; font-weight:normal; }
form button {
	float: right;
	width: 100px;
	color: #fff;
	cursor: pointer;
	background-color: #999999;
}
form button:hover {
	background-color: #CCCCCC;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<form>
<div>
<label for="datelb">entrer la date ici </label>
<input id="dateEvt" type="dateEvt" name="dateEvt" placeholder="ex : 11/12/2013 12:12 " required autofocus> </BR></BR>
<select id="SelImg">
  <option value="Noël">Noël</option>
  <option value="Les Vacances"> Les Vacances</option>
  <option value="anniversaire">Anniversaire</option>
  <option value="cadeau">Cadeau</option>
</select>
 
<button type="submit">envoyer</button>
</div>
</form>
 
</body>

Bonjour,
il est bon de commencer par lire la :faq:

:fleche: positionnement

Bonsoir,

vertical-align:central; n'existe pas , c'est top, bottom, baseline, middle, XXunitéDeValeur, ... mais pas central :)

Comment s'applique un vertical-align ?
1) pour du texte ou des element en ligne, il se regle sur le line-height si indiqué ou par rapport aux autre elements sur la même ligne.
2) sur une cellule de tableau, ou un element formate comme tel , en centrant verticlement le contenu , si la hauteur de la cellule(ou element en display:table-cell dans le flux) est supérieur a celle du contenu.

Tu as donc 2 choix:
1) passer ton form en boite en ligne et la centré a coté d'un autre element en ligne d'au moins la hauteur de l’écran

2) formater html et body comme un tableau d'une cellule.

sinon , la vielle méthode brutale du positionnement absolu et des marges négatives.

Merci du coup j'ai mis un absolute
Code:

1 2 3 position:absolute; top: 40%; left: 20%;
c'est pas mal mais ca suit pas parfaitement la taille de la fenêtre lors de son resize.

Merci