Question

我努力让我的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>

我已尝试在桌面上对齐文字，但没有运气

Answer 1

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

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

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

HTML表单对齐

1 个答案: