如何在 CSS 中将我的表格放置在页面的中心？答案

【问题标题】：How can I position my table in the center of the page in css?如何在 CSS 中将我的表格放置在页面的中心？
【发布时间】：2022-01-09 11:27:00
【问题描述】：

如何使用 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>

【问题讨论】：

问题出在你的 CSS 上，display: inline-block;。在body 上将其删除并将其在.Table 上更改为display: flex;。然后将justify-content:center 添加到您的.Table css。

标签： html css web

【解决方案1】：

您将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>

【讨论】：

谢谢，这有效，但现在边界半径不起作用。
我编辑了我的答案。我将border-radius: 16px; 设置为表格，现在它可以工作了。