0

HTML Form Center

i want to make this form smaller and put it in the middle of the screen but i am having trouble figuring out how to do that. can someone help me? <form action="action_page.php" method="post"> <div class="container"> <label for="uname"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember"> Remember me </label> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" class="cancelbtn">Cancel</button> <span class="psw">Forgot <a href="#">password?</a></span> </div> </form> <style> /* Bordered form */ form { border: 3px solid #f1f1f1; } /* Full-width inputs */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-image: linear-gradient(to bottom, #0099ff 0%, #00ccff 100%); padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } /* Add a hover effect for buttons */ button:hover { opacity: 0.8; } /* Extra style for the cancel button (red) */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Add padding to containers */ .container { padding: 16px; margin-left: auto; margin-right: auto; } /* The "Forgot password" text */ span.psw { float: right; padding-top: 16px; } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } </style>

4th Apr 2020, 10:57 PM
rodney
rodney - avatar
5 Answers
+ 2
Or just use flexbox html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; }
5th Apr 2020, 7:53 AM
Toni Isotalo
Toni Isotalo - avatar
0
it didnt work
4th Apr 2020, 11:11 PM
rodney
rodney - avatar
0
Display : block Then try
5th Apr 2020, 4:13 AM
Sohanur Rahman
Sohanur Rahman - avatar