html - How to move form to center of page -
html: <div id="registercontainer"> <div class = "regform"> <h1> </h1> <div id = "back_glob"> <div id = "back_form"> <form method="post"> <label>first name</label> <input type="text" name ="fname"/> <label>last name</label> <input type="text" name ="sname"/> <br/> <label>email address</label> <input id = "email" name = "email" type = "text"/> <br/> <label>create username</label> <input name = "uname" type = "text"/> <br/> <label>create password</label> <input name = "pass" type = "password"/> <br/> <input type="submit" name ="valid" value="register"/> </form> </div> </div> </div> css: #regcontainer{ width:1200px; margin: 70px auto; border : 1px solid; background-color: aliceblue; top:0; } .regcontainer h1{ font-size:40px; font-family: 'helvetica neue', sans-serif; color:black; line-height: 1; padding-left:35px; padding-top: 35px; color: black; } input{ display : inline-block; margin: 10px; } input[type = text] { padding:10px; border : 2px solid #212; border-radius: 2px; box-shadow: #212121; } input[type=password]{ padding:10px; border : 2px solid #212; border-radius: 2px; padding: 5px 10px 5px 10px; } input[type=submit]{ background-color:#ff0000; border: 1px solid #212121; border-radius:5px; color:aliceblue; font-weight: bold; } #back_form { justify-content: center; } hi guys , creating registration form , wondering how can move whole form center of page? right on left side of container, want abit - https://id2.s.nfl.com/fans/register?returnto=http%3a%2f%2fweeklypickem.fantasy.nfl.com%2f
here solution came with... do?
#registercontainer needs on center of page. meaning, fixed of 1200px not going work well. took approach of reducing size of container give better , feel this:
#registercontainer { max-width: 600px; min-width: 320px; width: 100%; /* ... other properties here ... */ } another note, <label> needs for attribute specified in this article.
let me know if have questions, fyi there many ways make work you.
#registercontainer { max-width: 600px; min-width: 320px; width: 100%; margin: 70px auto; border: 1px solid; background-color: aliceblue; top: 0; padding: 15px; } .regcontainer h1 { font-size: 40px; font-family: 'helvetica neue', sans-serif; color: black; line-height: 1; padding-left: 35px; padding-top: 35px; color: black; } input { display: inline-block; margin: 10px; } input[type=text] { padding: 10px; border: 2px solid #212; border-radius: 2px; box-shadow: #212121; } input[type=password] { padding: 10px; border: 2px solid #212; border-radius: 2px; padding: 5px 10px 5px 10px; } input[type=submit] { background-color: #ff0000; border: 1px solid #212121; border-radius: 5px; color: aliceblue; font-weight: bold; } #back_form { justify-content: center; }<div id="registercontainer"> <div class="regform"> <h1> register nackstack</h1> <div id="back_glob"> <div id="back_form"> <form method="post"> <label for="fname">first name</label> <input type="text" name="fname" id="fname" /> <br/> <label for="sname">last name</label> <input type="text" name="sname" id="sname" /> <br/> <label for="email">email address</label> <input id="email" name="email" type="text" /> <br/> <label for="uname">create username</label> <input name="uname" type="text" id="uname" /> <br/> <label for="password">create password</label> <input name="pass" type="password" id="password"/> <br/> <input type="submit" name="valid" value="register" /> </form> </div> </div> </div>
Comments
Post a Comment