How do I center this form in css?
CssCss Problem Overview
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>
Css Solutions
Solution 1 - Css
Another way
body {
text-align: center;
}
form {
display: inline-block;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
Solution 2 - Css
- 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 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;
}
Solution 3 - Css
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
Solution 4 - Css
You can try
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Or
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
Solution 5 - Css
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
Solution 6 - Css
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
Solution 7 - Css
This best solution I found online is using absolute positioning.
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-49%, -49%);
}
Solution 8 - Css
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;
}
Solution 9 - Css
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;
}
Solution 10 - Css
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 class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" 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.
Solution 11 - Css
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.
Solution 12 - Css
body {
text-align: center;
}
form {
width:90%;
background-color: #c0d7f8;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
Solution 13 - Css
<!-- 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>
Solution 14 - Css
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: https://stackoverflow.com/a/49378738/7841955
Solution 15 - Css
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