Advertisement
Advertisement


How do I center this form in css?


Question

I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.

<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>
2011/11/11
1
37
11/11/2011 5:31:50 PM

Accepted Answer

Another way

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

2018/05/17
64
5/17/2018 9:47:54 PM


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/

Works & tested in Chrome/IE/FF

2012/07/01

You can try

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

Or

form {
    margin-left: 15%;
    margin-right:15%;
    width: 70%;
}
2018/02/03

Try adding this to your css

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

and add width:100% to the body tag

Then put:

<div class="form">

before the tag.

2011/11/11

i dont know if the full resolution has been made for this yet. i know that from doing a 2 column page with fixed left side bar, to get a contact us form centered on my page i put the following:

    form {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
 }

this worked for me so thought id throw in my resolution to the same problem

2015/04/20

You can use the following CSS to center the form (note that it is important to set the width to something that isn´t 'auto' for this to work):

form {
   margin-left:auto;
   margin-right:auto;
   width:100px;
}
2011/11/11

Source: https://stackoverflow.com/questions/8097744
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]