如何使用 CSS 文件将 table 在 HTML 中居中？

Question

我目前正在将 CSS 添加到我的 HTML 网页。目前，我的 CSS 文件非常基础，因为我刚开始。它基本上将正文中的所有内容居中，但是，我的 HTML 页面中的 none 表格居中，它们只是停留在屏幕的左侧。有人可以告诉我我应该添加到此 CSS 代码中以使表格居中吗，谢谢！

main.css

body {
    text-align: center; 
        font-family: "Times New Roman", Times, serif;

    }

changePassword.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF-8"> 
<link rel = "stylesheet" type = "text/css" href = "main.css">
<title>Change Password</title>
</head>

<body>
    <h1>Change Password</h1>
    <form action ="NewPassword" method = post> 
    <table border ="1"> 
    <tr>
    <td>Existing Password:</td>
    <td><input type = "password" name = "oldpassword" size = "20"></td>
    </tr>

    <tr>
    <td>New Password:</td>
    <td><input type = "password" name = "newpassword" size = "20"></td>
    </tr>

    <tr>
    <td>Confirm New Password</td>
    <td><input type = "password" name = "confirmpassword" size = "20"></td>
    </tr>
    </table>
    <input type = "submit" value = "Update Password">
    </form>.
</body>

</html>

Answer 1

给出以下 css 将使您的 table 水平居中：

table {
    margin: 0 auto;
}

Working Fiddle

如何使用 CSS 文件将 table 在 HTML 中居中？

How to centre a table in HTML using CSS file?

html

css

centering