CODEWITHSUNDEEP
htmlcssformscenter
user2005857
user2005857

Reputation: 21

Center a form using css

I am trying center (to middle of the page) a html form using css.

I already read other member's somewhat similar questions. But, I cannot figure this out

This is the HTML form:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</div>
</body>
</html>

and this is the CSS:

<style>
form{
  width: 700px ;
  margin-left: 0 auto;
}
label { 
    text-align:right; 
    width:100px; 
}
input { 
    margin-left: 10px; 
}
label.check, label.radio { 
    text-align:left; 
}
</style>

I tried quite some time. But still I could not center the form. Any guidence? Thanks

Upvotes: 1

Views: 10284

Answers (2)

Joseph Silber
Joseph Silber

Reputation: 219930

The shorthand property is margin, not margin-left. Fix it, and it'll be centered:

form {
  width: 700px ;
  margin: 0 auto;
}

Here's the fiddle: http://jsfiddle.net/Tzr7D/

Upvotes: 7

corgrin
corgrin

Reputation: 265

the "magin: 0 auto;" will center your form from whatever holds it. you may want to add something that will hold your form and set the width of that something so that it will set your form to center. let's say for example a table like this

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
<table>
<tr>
<td width="1024px">
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</td>
</tr>
</table>
</div>
</body>
</html>

i added the table before the form. try it. hope this helps.

Upvotes: 1

Related Questions