html - Is it possible to center a form while maintaining separation of content and presentation? -
edit 5/21/13 13:40 est: added inline-block styling.
considering following page:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> form { display: inline-block; } </style> <title>log in </title> </head> <body> <form action="/login" method="post"> <label for="username">username: </label><input type="text" name="username" id="username"> <label for="password">password: </label><input type="password" name="password" id="password"> <input type="submit" value="log in"> </form> </body> </html> is there way in css center form without
- adding divs à la bootstrap grid
- guessing width of form in percentage or px
- center-aligning text inside form
basically, want block contains form have width determined automatically contents, have center of block lined center of page.
what you're looking display: table, not display: inline-block. both display types have shrink fit behavior you're looking for, table allows use margins purpose of centering.
http://cssdeck.com/labs/slpqdfct
form { display: table; margin: 0 auto; }
Comments
Post a Comment