28172 sujets

CSS et mise en forme, CSS3

Centrer horizontalement et verticalement un formulaire dans ma page

Bonjour,

Voila un bon bout de temps que j'essaie sans succès de centrer horizontalement et verticalement un formulaire dans ma page d'accueil.

Pour le centrage horizontal aucun problème :
body {
  text-align: center
}


et le tour est joué.
Mais pour le centrage vertical c'est une autre histoire ! j'ai bien essayé d'appliquer la technique décrite dans le tutoriel comment centrer verticalement sur tous les navigateurs mais a priori pour appliquer cette technique, il faut définir la propriété line-height mais cette dernière ne semble pas accepter les hauteurs en %age.

Donc j'arrive bien à centrer verticalement mon formulaire mais à condition de définir une hauteur fixe pour mon line-height mais n'est-il pas possible de centrer verticalement sur une hauteur égale à 100% de ma fenêtre ?

voici mon code CSS :
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: #EEFFEE;
  text-align: center;
  line-height: 400px;
}

form {
  border: 1px solid red;
  vertical-align: middle;
}


et HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title></title>
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="include/css/style.css">
</head>

<body>
<form method="POST" action="process.php">
<input type="text">
<input type="password">
<input type="submit">
</form>
</body>
</html>
bonjour,

avec un tableau :
<table>
<tr>
<td>
<form method="POST" action="process.php">
<input type="text">
<input type="password"
<input type="submit">
</form>
</td>
</tr>
</table>

sans ta tableau :
<form method="POST" action="process.php">
<input type="text">
<input type="password"
<input type="submit">
</form>


et les style (cnvient aux deux architecture html ci-dessus)
html , body , table  {
height: 100%;
display:table;
width:100%;
border-collapse:collapse;
text-align: center;
vertical-align: middle;
}  
body {
display:table-cell;

background: #EEFFEE;

}

form {
border: 1px solid red;
display:inline-block;
}


Le tableau fait que ça passera pas trop mal dans les vieux navigateur ... et c'est l'assurance que ça marche .

(ce theme est recurent et il y a 6 ou 7 techniques plus ou moins hasardeuses ou subtiles sans tableau et seulement css , generalement difficile a maitriser au gré des intervenants et mise a jour ...)

GC
Modifié par gc-nomade (23 Sep 2010 - 16:25)
Sujet clos
Aller à