html - CSS centered border -
hy everyone,
i want have border around login form in html code, current code, isn't quite want. want border encapsulate centered elements. idea how that?
the result looks this:
my code:
index.php:
<?php include "base.php"; ?> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!doctype> <html> <title>shopping list</title> <link rel="stylesheet" href="style.css" type="text/css" /> </html> <head> </head> <body bgcolor=#878787> <div class="form"> <center><h1>please enter login details</h1></center> <form> <label for="username">username:</label><input type="text" name="username" id="username" > </br> <label for="password">password:</label><input type="text" name="password" id="password" > </br> <input type="submit" name="login" id="login" value="login"> </form> </div> </body> style.css:
div.form{ text-align: center; border: 5px solid; border-radius: 25px; box-shadow: 5px 5px 5px #888888; } .form label, .form input{ display: inline-block; } .form input { width: 150px; } .form label { width: 100px; } input { border: 5px solid; border-radius: 25px; box-shadow: 5px 5px 5px #888888; font-family: trebuchet ms; border: 1px solid #ccc; margin-bottom: 5px; background-color: #fff; padding: 2px; } input[type="submit"] { display: inline-block; position: relative; margin-top: 5px; width: 150px; height: 30px; left: 50px; } input:hover { border: 1px solid #222; background-color: #eee; }
try add
.form{ max-width:320px; margin:0 auto; } 
Comments
Post a Comment