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。