1

我在网站上有以下页面：

截屏

我通过在它们周围添加具有定义宽度的两列来使这两列居中：

    <table class="form">
    <tbody>
    <tr>
    <td style="width:20%;"></td>
    <th>User ID</th>
    <td><input type="text" name="userid" id="userid" class="medium" value="" /></td>
    <td style="width:20%;"></td>
    </tr>
    <tr>
    <td></td>
    <th>Password</th>
    <td><input type="password" name="password" id="password" class="medium" /></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <th><label for="remember">Remember my user ID</label></th>
    <td><input type="checkbox" name="remember" id="remember" value="true" /></td>
    <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="3"><a href="forgot/">Forgot your user ID or password?</a></td>
    <td><input type="submit" name="submit" id="submit" value="Login" /></td>
    </tr>
    </tfoot>
    </table>

如果没有宽度为 20% 的侧面的两个空列，有什么方法可以做到这一点？

4

3 回答 3

5 
<style>
table.form {
    width: 400px; /* or however wide you want it */
    margin: 0 auto;
}
</style>

然后，如果您愿意，可以通过将提交按钮放在自己的元素中来使提交按钮跨越整个宽度，或者您可以将其保留在表格中以获得一致的宽度。

于 2013-02-20T20:58:42.087 回答
5

尽管您可以找到解决方案来处理表格，因为有人已经解决了，但我建议您不要为此使用它们，表格的样式总是有问题的。您可以使用不同的 html 元素（例如 div）来完成此操作。下次再考虑吧：）

于 2013-02-20T21:00:41.613 回答
0

定义要居中的元素的宽度（使用像素、em-s、百分比..），并设置margin-left: auto margin-right: auto会有所帮助

于 2013-02-20T21:48:11.153 回答