43 votes

Comment centrer ce formulaire en css ?

J'ai tout essayé. Je n'arrive pas à centrer cela sur l'écran. J'utilise ie 9 mais il fait la même chose en chrome. Il se trouve juste à gauche de la page Web. Merci pour toute aide.

 <style type="text/css">

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    align:center;
}
label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

br {
 clear: left;
}



    </style>
</head>


<body>

 <form name="Form1"  action="mypage.asp" method="get">

 <label for="name">Name</label>
 <input id="name" name="name"><br>

 <label for="address">Address</label>
 <input id="address" name="address"><br>

 <label for="city">City</label>
 <input id="city" name="city"><br>
 <input type="submit" name="submit" id="submit" value="submit" class="button" />

</form>
</body>

81voto

Aleks Dorohovich Points 374

Autrement

 body {
    text-align: center;
}
form {
    display: inline-block;
}
 <body>
  <form>
    <input type="text" value="abc">
  </form>
</body>

37voto

orfdorf Points 820
  1. Enveloppez votre formulaire dans un div.
  2. Réglez l'affichage du div sur block et text-align sur center (cela centrera le formulaire contenu).
  3. Définissez l'affichage du formulaire sur bloc en ligne (taille automatiquement en fonction du contenu), les marges gauche et droite sur auto (le centre horizontalement) et l'alignement du texte sur la gauche (sinon ses enfants seront également alignés au centre).

HTML :

 <div class="form">
    <form name="Form1" action="mypage.asp" method="get">
        ...
    </form>
</div>

CSS :

 div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

20voto

Cory Danielson Points 3770
body { text-align: center; }
     /* center all items within body, this property is inherited */
body > * { text-align: left; }
     /* left-align the CONTENTS all items within body, additionally
        you can add this text-align: left property to all elements
        manually */
form { display: inline-block; }
     /* reduces the width of the form to only what is necessary */

http://jsfiddle.net/sqdBr/4/

Fonctionne et testé dans Chrome/IE/FF

17voto

tmjam Points 509

Tu peux essayer

 form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}

Ou

 form {
    margin-left: 15%;
    margin-right:15%;
    width: 70%;
}

6voto

Peter Stuart Points 2172

Essayez d'ajouter ceci à votre css

 .form { width:985px; margin:0 auto }

et ajoutez la largeur : 100 % à la balise body

Mettez ensuite :

 <div class="form">

avant la balise.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X