Centrage et cadrage div complexe

**cotojo12** · 12/12/2013, 18h35

Bonjour,

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

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

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

**NoSmoking** · 12/12/2013, 18h52

Bonjour,
il est bon de commencer par lire la

positionnement

**CCyrillus** · 12/12/2013, 19h58

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.

**cotojo12** · 13/12/2013, 14h46

Merci du coup j'ai mis un absolute

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Centrage et cadrage div complexe

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager