Question

我有一些旧的HTML。没有包含类似CSS的框架。我必须使用表格进行布局。我的挑战是，我正在试图弄清楚如何水平居中我的form，但让表格中的字段左对齐。换句话说，我正在尝试创建这样的东西：

+--------------------------------------------------+
|                     Welcome                      |
|           Please tell us about yourself          |
|                                                  |
|     first name            last name              |
|     +----------------+    +----------------+     |
|     |                |    |                |     |
|     +----------------+    +----------------+     |
|                                                  |
|     email address                                |
|     +--------------------------------------+     |
|     |                                      |     |
|     +--------------------------------------+     |
|     [Submit]                                     |
|                                                  |
+--------------------------------------------------+

目前，我的HTML看起来像这样：

<table style="width:100%;">
  <tr>
    <td style="width:10%;"></td>
    <td style="width:80%; text-align:center;">
      <h1>Welcome</h1>    
      <p>Please tell us about yourself</p>
      <div>
        <form>
          <table style="text-align:left;">
            <tr>
              <td>first name</td>
              <td>last name</td>
            </tr>
            <tr>
              <td><input id="firstName" /></td>
              <td><input id="lastName" /></td>
            </tr>
            <tr><td colspan="2">email address</td></tr>
            <tr><td colspan="2"><input id="emailAddress" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="Submit" />
          </table>
        </form>
      </div>
    </td>
    <td style="width:10%;"></td>
  </tr>
</table>

当HTML在我的屏幕上呈现时，一切都会出现。 “欢迎”和“请告诉我们您自己”文本按预期为中心。但是，我的表格没有居中。它与左边缘齐平齐平。如何将表单放在第二个单元格中？

Answer 1

将margin: 0 auto添加到您的表格中？

<table style="width:100%;">
  <tr>
    <td style="width:10%;"></td>
    <td style="width:80%; text-align:center;">
      <h1>Welcome</h1>    
      <p>Please tell us about yourself</p>
      <div>
        <form>
          <table style="text-align:left; margin: 0 auto;">
            <tr>
              <td>first name</td>
              <td>last name</td>
            </tr>
            <tr>
              <td><input id="firstName" /></td>
              <td><input id="lastName" /></td>
            </tr>
            <tr><td colspan="2">email address</td></tr>
            <tr><td colspan="2"><input id="emailAddress" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="Submit" />
          </table>
        </form>
      </div>
    </td>
    <td style="width:10%;"></td>
  </tr>
</table>

Answer 2

试试这个

form {display: inline-block; text-align: center;}

https://jsfiddle.net/sovfa4L8/1/

text-align: center没有必要。但是，对于旧浏览器来说，它可能是一个好点。

Answer 3

将表单居中的最简单方法是将表单的样式设置为显示内嵌块，如此

form {
  display: inline-block;
}

使用表格单元格中的CSS居中表单

3 个答案: