Center a form using css

2019-08-11 14:41发布

站内问答 / HTML/CSS
1215 2 5

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

2条回答
▲ chillily
2楼-- · 2019-08-11 15:19

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.

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2019-08-11 15:26

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/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)