Centering form elements with left alignment
- by user1766797
I would like to center the elements in my form without moving the text or buttons from being aligned on the left.
So it would look like this:
The bottom square is supposed to be a button.
I want it centered, but the <center> tag moves the text and button so they're centered to the input box.
Here is my code:
<form action="login.php" method="post">
<div class="aside">
<div id="center">
Username:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="passwor"><br>
<input type="submit" class="button" name="submit" value="Login"><br><br>
</div>
</div>
</form>
and the css:
#center{
width: 250px;
margin-left: auto;
margin-right: auto;
float: center;
}
div.aside {
margin-left: 15px;
margin-top: 10px;
width: 250px;
background: #f5f5f5;
border: 1px solid #e9e9e9;
line-height: 150%;
}
div.aside .button{
padding:3px;
width: 50px;
margin-top: 3px;
background-color: #00A1E6;
border: 1px solid #0184BC;
text-decoration:none;
color: #ffffff;
text-align: center;
-webkit-appearance: none;
}
