html - 如何使用两个也居中对齐的按钮将文本输入居中居中

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

首先，没有必要用这么多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
}​

现场演示

Answer 3

将此添加到您的CSS中：

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