如何使用css将此表居中？我在各种各样的网站上尝试了很多方法，但似乎都不起作用。蚂蚁不明白为什么它不起作用。如前所述，它需要在我的网站页面的中间。如果有人帮忙，我们将不胜感激。感谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Homework Tracker</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Outfit', sans-serif;
text-align: center;
background-color: rgb(248, 250, 251);
display: inline-block;
}
table,tr,td,th{
border-collapse: collapse;
width: 900px;
padding-bottom: 10px;
padding-top: 10px;
background-color: white;
text-align: center;
}
.Table{
filter: drop-shadow(0 0 1rem rgb(238, 238, 238));
border: 0px white;
border-radius: 16px;
overflow: hidden;
width: 100%;
display: inline-block;
position: cen;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class = "Table">
<table>
<tr>
<td>9:00 AM - 9:45 AM</td>
<td>Science<br><i>Gaeeni</i><br><b>Science Lab</b></td>
<td>Mech<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Cardillo</i><br><b>Room 9</b></td>
</tr>
</table>
</div>
</body>
</html>您将display: inline-block设置为body和.table
所以您的代码不起作用
我删除了这些属性，并使用display: flex; justity-content: center将表放在中间。
您可以通过width: 900px; margin-left: auto; margin-right: auto;到.table来完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Homework Tracker</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Outfit', sans-serif;
text-align: center;
background-color: rgb(248, 250, 251);
}
table,tr,td,th{
border-collapse: collapse;
width: 900px;
padding-bottom: 10px;
padding-top: 10px;
background-color: white;
text-align: center;
border-radius: 16px;
}
.Table{
filter: drop-shadow(0 0 1rem rgb(238, 238, 238));
border: 0px white;
border-radius: 16px;
overflow: hidden;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class = "Table">
<table>
<tr>
<td>9:00 AM - 9:45 AM</td>
<td>Science<br><i>Gaeeni</i><br><b>Science Lab</b></td>
<td>Mech<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
<td>Math<br><i>Cardillo</i><br><b>Room 9</b></td>
</tr>
</table>
</div>
</body>
</html>