Question

这是html

<form id="ContactForm" action="">
  <div>
     <div class="wrapper">
        <div class="bg"><input class="input" type="text"></div>Name:
     </div>
     <div class="wrapper">
        <div class="bg"><input class="input" type="text"></div>Email:
     </div>
     <div class="wrapper">
        <div class="bg"><input class="input" type="text"></div>Phone:
     </div>
     <div class = "wrapper"> <a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">Submit</a></div>
     <div class="wrapper"> <a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">Generate code</a>
  </div>
</form>

css -

#ContactForm .button {
    margin: 0 auto;
    display:block;
    font-size:20px;
    font-weight:700;
    color:#fff;
    line-height:35px;
    width:90px;
    text-align:center;
    background:url(../images/button_form.gif) top repeat-x #308da2;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(js/PIE.htc);
    position:relative;
    text-decoration:none
}

Answer 1

应用

text-align: center

到您的表单的CSS。

此处http://jsfiddle.net/cpFZM/是基于您发布的代码的粗略示例。这将使所有内容对齐。如果您只想将某些元素居中对齐，则只需将样式应用于其包含的divs。

Answer 2

将此添加到您的css中：

#ContactForm div {margin: 0px auto; width:130px}

Answer 3

首先，不需要使用这么多divs来设计表单。请改用label标记。

<强> HTML

 <form id="ContactForm" action="">
     <label>Name:<input class="input" type="text"></label>    
     <label>Email: <input class="input" type="text"></label>                         
     <label>Phone:<input class="input" type="text"></label>                     
     <a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">Submit</a>
     <a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">Generate code</a>
</form>

<强> CSS

#ContactForm {width:90%; 
    margin:0 auto; 
    background:#e3f8f9; 
    border:#308da2 solid 1px; 
    text-align:center; 
    padding:10px 0}
label{display:block; margin:8px 0}
input{margin-left:15px}
#ContactForm .button {
    display:inline-block;
    font-size:20px;
    font-weight:700;
    color:#fff;
    text-align:center;
    background:url(../images/button_form.gif) top repeat-x #308da2;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    behavior:url(js/PIE.htc);
    text-decoration:none;
    padding:4px 15px
}

<强> LIVE DEMO

如何将文本输入居中放在中心，两个按钮也是居中对齐的

3 个答案: