I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.
<style type="text/css"> body { margin:50px 0px; padding:0px; text-align:center; align:center; } label,input { display: block; width: 150px; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } </style> </head> <body> <form name="Form1" action="mypage.asp" method="get"> <label for="name">Name</label> <input id="name" name="name"><br> <label for="address">Address</label> <input id="address" name="address"><br> <label for="city">City</label> <input id="city" name="city"><br> <input type="submit" name="submit" id="submit" value="submit" class="button" /> </form> </body>
To centre block elements (such as divs and forms and paragraphs), give it a width and set margin-right and margin-left to auto.
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
To actually center the page, add margin: auto .
Another way
body { text-align: center; } form { display: inline-block; }
<body> <form> <input type="text" value="abc"> </form> </body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With