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>
This question is related to
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.
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;
}
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
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.
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.
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Private</title>_x000D_
_x000D_
<!-- local links -->_x000D_
<style>_x000D_
_x000D_
_x000D_
body{_x000D_
background-color:#6e6969;_x000D_
text-align:center;_x000D_
}_x000D_
body .form_wrapper{_x000D_
_x000D_
display:inline-block;_x000D_
background-color: #fff;_x000D_
border-radius: 5px;_x000D_
height: auto;_x000D_
padding: 15px 18px;_x000D_
margin: 10% auto;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
} _x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class = "form_wrapper">_x000D_
<form method="post" action="function.php">_x000D_
<h1 class = "formHeading">Admin login form</h1>_x000D_
<input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required">_x000D_
<input type = "password" name = "password" id = "password" placeholder = "Enter password" required = "required">_x000D_
<button type = "submit" >Login</button>_x000D_
<a href = "#"> froget password!</a>_x000D_
<a href = "#"><span>?</span>help</a>_x000D_
</form>_x000D_
_x000D_
</div>_x000D_
</body>_x000D_
_x000D_
_x000D_
</html>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
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
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;
}
body {_x000D_
text-align: center;_x000D_
}_x000D_
form {_x000D_
width:90%;_x000D_
background-color: #c0d7f8;_x000D_
}<body>_x000D_
<form>_x000D_
<input type="text" value="abc">_x000D_
</form>_x000D_
</body>You can try
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Or
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
Source: Stackoverflow.com