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 name="name"><br> <label for="address">Address</label> <input name="address"><br> <label for="city">City</label> <input name="city"><br> <input type="submit" name="submit" value="submit" />
</form>
</body>15 Answers
Another way
body { text-align: center;
}
form { display: inline-block;
}<body> <form> <input type="text" value="abc"> </form>
</body>- Wrap your form in a div.
- Set the div's display to block and text-align to center (this will center the contained form).
- Set the form's display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).
HTML:
<div> <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;
}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 */
Works & tested in Chrome/IE/FF
0You can try
form { margin-left: 25%; margin-right:25%; width: 50%;
}Or
form { margin-left: 15%; margin-right:15%; width: 70%;
}Try adding this to your css
.form { width:985px; margin:0 auto }and add width:100% to the body tag
Then put:
<div>before the tag.
6i 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
This best solution I found online is using absolute positioning.
.login-container { position: absolute; top: 50%; left: 50%; transform: translate(-49%, -49%); }You can try this code for your 'body' tag, change it as you like..
body { display: flex; justify-content: center; margin-top: 5%; align-items: center;
}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;
}I css I got no idea but I made that just by centering the form in html something like this:
in css:
form.principal {width:12em;}
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}then in html:
<center><form method="POST">
<fieldset>
<p><label for="username">User</label><input type="text" name="username" />
<p><label for="password">Password</label><input type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>This will center the form, and the content will be in the left of the centered form.
Normally, if you look up any software issue on stackoverflow, you quickly find a clear answer. But in CSS, even something as simple as "center a form" leads to a long discussion, and lots of failed solutions.
Correction: orfdorf's solution (above) works.
1body { text-align: center;
}
form { width:90%; background-color: #c0d7f8;
}<body> <form> <input type="text" value="abc"> </form>
</body><!DOCTYPE html>
<html>
<head> <title>Private</title> <!-- local links -->
<style>
body{ background-color:#6e6969; text-align:center;
}
body .form_wrapper{ display:inline-block; background-color: #fff; border-radius: 5px; height: auto; padding: 15px 18px; margin: 10% auto; margin-left: auto; margin-right: auto;
}
</style>
</head>
<body> <div class = "form_wrapper"> <form method="post" action="function.php"> <h1 class = "formHeading">Admin login form</h1> <input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required"> <input type = "password" name = "password" id = "password" placeholder = "Enter password" required = "required"> <button type = "submit" >Login</button> <a href = "#"> froget password!</a> <a href = "#"><span>?</span>help</a> </form> </div>
</body>
</html>Another solution (without a wrapper) would be to set the form to display: table, which would make it act like a table so it would have the width of its largest child, and then apply margin: 0 auto to center it.
form { display: table; margin: 0 auto;
}Credit goes to:
I had the same problem (i use google) What i did is i added the align attribute to the form
<form align="center"> <!--Stuff-->
</form>That is one solution
2
