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

回答1:

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/

回答2:

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.

来源：https://stackoverflow.com/questions/14574303/center-a-form-using-css

标签

html

css

forms

center