在表格单元格中使用 CSS 居中表格答案

【问题标题】：Centering Form with CSS in Table Cell在表格单元格中使用 CSS 居中表格
【发布时间】：2016-03-11 03:41:31
【问题描述】：

我有一些旧的 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 在我的屏幕上呈现时，一切都会出现。 “欢迎”和“请告诉我们你自己”文本按预期居中。但是，我的表格没有居中。它与左边缘对齐。如何在第二个单元格中居中表单？

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

使表单居中的最简单方法是设置表单的样式以显示 inline-block 像这样

form {
  display: inline-block;
}

【讨论】：

【解决方案3】：

试试这个

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

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

text-align: center 不是必需的。但是，对于旧浏览器来说，这可能是一个好点。

【讨论】：