HTML：如何对齐此表单？答案

【问题标题】：HTML: How can I align this form?HTML：如何对齐此表单？
【发布时间】：2014-03-22 11:10:08
【问题描述】：

我的代码中有一个表单，但它位于页面左侧。我不知道如何对齐它。

 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

它看起来像这样：

任何帮助表示赞赏。

【问题讨论】：

form { width: 400px; margin: 0 auto; }
你正在使用一堆divs。默认情况下，它们是块级元素。解决这个问题的方法是float 他们，或者display:inline-block 在您的.row 的CSS 中
嗯...@mdesdev 让我很好奇。怎么对齐？垂直还是水平？
@Oberst Horizontally...如果这是问题;)
@blutuu 如果此问题已得到回答，请您将其标记为这样。谢谢

标签： html forms

【解决方案1】：

如果您只是希望它水平居中，请将您的表单放在一个宽度受限的 div 父级和一个文档范围的 div 祖父级中，内容居中：

<div style="text-align: center">
 <div style="width: 400px; text-align: left;">
  <form ...
  ...
  </form>
 </div>
</div>

【讨论】：

【解决方案2】：

<style media="screen" type="text/css">

form {
width: 400px; 
margin: 0 auto; 
} 

</style>
 <form method="post" action="#">
  <div class="5grid">
    <div class="row">
      <div class="6u">
        <input type="text" name="name" id="name" placeholder="Name">
      </div>
      <div class="6u">
        <input type="text" name="email" id="email" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="text" name="subject" id="subject" placeholder="Subject">
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <textarea name="message" id="message" placeholder="Message"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="12u">
        <input type="submit" class="button" value="Send Message">
        <input type="reset" class="button button-alt" value="Clear Form">
      </div>
    </div>
  </div>
</form>

这应该可以工作

【讨论】：