HTML 表单对齐答案

【问题标题】：HTML Form AlignHTML 表单对齐
【发布时间】：2015-09-17 14:12:16
【问题描述】：

我正在努力让我的 div 的内容对齐，除了表格的内容之外，所有内容都会居中。标题将与登录按钮一起居中。

CSS：

.center {
margin:auto;
width: 50%;
border:3px solid #8AC007;
padding: 10px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
font-family:'Century Gothic';
text-align:center;
}

HTML：

 <div class="center">   
<form id="form1" runat="server">
<h3>
  Login Page</h3>
<table >
  <tr>
    <td>
      E-mail address:</td>
    <td>
      <asp:TextBox ID="UserEmail" runat="server" /></td>
    <td>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
        ControlToValidate="UserEmail"
        Display="Dynamic" 
        ErrorMessage="Required" 
        runat="server" />
    </td>
  </tr>
  <tr>
    <td>
      Password:</td>
    <td>
      <asp:TextBox ID="UserPass" TextMode="Password" 
         runat="server" />
    </td>
    <td>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" 
        ControlToValidate="UserPass"
        ErrorMessage="Cannot be empty." 
        runat="server" />
    </td>
  </tr>
  <tr>
    <td>
      Remember me?</td>
    <td>
      <asp:CheckBox ID="Persist" runat="server" /></td>
  </tr>
</table>
<asp:Button ID="Submit1" OnClick="Logon_Click" Text="Login" 
   runat="server" />
<p>
  <asp:Label ID="Msg" ForeColor="red" runat="server" />
</p>
</form>
    </div>

我也试过在桌子上对齐文本，但没有成功

【问题讨论】：

你能给我看一些图片来对齐内容吗
为参考添加图片
将 align="center" 属性添加到您的代码中
附带说明，您永远不应该使用表格进行布局。 10 多年来，这种做法一直受到强烈反对。

标签： html css

【解决方案1】：

将margin: 0 auto 应用于表格元素。目前，您的margin: auto 仅将表单居中，但在其中，表格与左侧对齐，因为内容的默认行为是从左侧开始。

不要尝试将表格用于布局目的，尽管您可以将它们用于表格数据。

.center {
  margin: auto;
  width: 50%;
  border: 3px solid #8AC007;
  padding: 10px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  font-family: 'Century Gothic';
  text-align: center;
}
table {
  margin: 0 auto; /* Add */
}

<div class="center">
  <form id="form1" runat="server">
    <h3>
  Login Page</h3>
    <table>
      <tr>
        <td>
          E-mail address:</td>
        <td>
          <asp:TextBox ID="UserEmail" runat="server" />
        </td>
        <td>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="UserEmail" Display="Dynamic" ErrorMessage="Required" runat="server" />
        </td>
      </tr>
      <tr>
        <td>
          Password:</td>
        <td>
          <asp:TextBox ID="UserPass" TextMode="Password" runat="server" />
        </td>
        <td>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="UserPass" ErrorMessage="Cannot be empty." runat="server" />
        </td>
      </tr>
      <tr>
        <td>
          Remember me?</td>
        <td>
          <asp:CheckBox ID="Persist" runat="server" />
        </td>
      </tr>
    </table>
    <asp:Button ID="Submit1" OnClick="Logon_Click" Text="Login" runat="server" />
    <p>
      <asp:Label ID="Msg" ForeColor="red" runat="server" />
    </p>
  </form>
</div>

【讨论】：

谢谢你，正是我想要的。