Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I center this form in css?

Tags:

css

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> 
like image 616
johnny Avatar asked Nov 11 '11 17:11

johnny


People also ask

How do I center a form element?

To centre block elements (such as divs and forms and paragraphs), give it a width and set margin-right and margin-left to auto.

How do I center a form on a page?

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.

How do you keep a form centered in HTML?

To actually center the page, add margin: auto .


1 Answers

Another way

body {      text-align: center;  }  form {      display: inline-block;  }
<body>    <form>      <input type="text" value="abc">    </form>  </body>
like image 148
Aleks Dorohovich Avatar answered Oct 03 '22 11:10

Aleks Dorohovich