有没有办法将我的表格/图像在此代码笔中居中

Question

所以我最近开始学习如何编码。我决定制作一个包含所有粉碎角色伤害值的网站。到目前为止，我的主要挫折是我无法找到一种方法来将所有不同大小的表格和图像居中。

到目前为止，我已经尝试将所有表格放入div中，并在左右两侧使用自动边距将它们居中。此外，我试图以这种方式对我的桌子进行弹性包装并将它们居中，但似乎没有任何效果。在我看来，我剩下的唯一选择是手动将它们全部居中，但这似乎需要很长时间，我相信有不同的解决方案。

以下是我的表当前配置方式

#damagetablemario {
   display:none;
   position:absolute;
   top:700px;
   left:80px;
   border-collapse:collapse;
}
#damagetablemario2 {
   display:none;
   position:relative;
   top:400px;
   left:110px;
   border-collapse:collapse;
}
#damagetablemario3 {
   display:none;
   position:relative;
   top:450px;
   left:540px;
   border-collapse:collapse;
   margin-bottom:200px;
}

以下是我的表格是如何用 html 编写

的

<table id = "damagetablemario">
   <tr>
      <th>Neutral</th>
      <th>Forward  Tilt</th>
      <th>Up Tilt</th>
      <th>Down-Tilt</th>
      <th>Forward-Smash</th>
      <th>Up-Smash</th>
      <th>Down-Smash</th>
      <th>Neutral-Air</th>
      <th>Forward-Air</th>
      <th>Back-Air</th>
      <th>Up-Air</th>
      <th>Down-Air</th> 
   </tr>
   <tr>
      <td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
      <td class = "Forward-Tilt">7%</td>
      <td class = "Up-Tilt">5.5%</td>
      <td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
      <td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
      <td class = "Up-Smash">14%</td>
      <td class = "Down-Smash">10% (front)<br> 12% (back)</td>
      <td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
      <td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
      <td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
      <td class = "Up-Air">7%</td>
      <td class = "Down-Air">1.4% (1-5 hits) <br>
         5.5% (hit  6) <br>
         2% (landing)
      </td>
   </tr>
</table>
<table id = "damagetablemario2">
   <tr>
      <th>Grab</th>
      <th>Pummel</th>
      <th>Forward Throw</th>
      <th>Back Throw</th>
      <th>Up Throw</th>
      <th>Down Throw</th>
      <th>Neutral Special</th>
      <th>Side Special</th>
      <th>Up Special</th>
      <th>Down Special</th>
      <th>Final Smash</th> 
   </tr>
   <tr>
      <td>0%</td>
      <td>1.3%</td>
      <td>8%</td>
      <td>11% (throw)<br>8% (collateral)</td>
      <td>7%</td>
      <td>5%</td>
      <td>5% (early)<br>4% (late)</td>
      <td>7% 1.5x <br> projectile reflect</td>
      <td>5% (hit 1)<br> 0.6% (hits 2-6)<br>3% (hit 7)</td>
      <td>0%</td>
      <td>2% (early)<br>2.5% (clean)<br>3% (late)</td>
   </tr>
</table>
<table id = "damagetablemario3">
   <tr>
      <th>Floor Attack Front</th>
      <th>Floor Attack Back</th>
      <th>Floor Attack Trip</th>
      <th>Edge Attack</th>
   </tr>
   <tr>
      <td >7%</td>
      <td >7%</td>
      <td >5%</td>
      <td >9%</td>
   </tr>
</table>

我的

最终目标是使我的表格在屏幕中间居中，而不管其中有多少文本。

https://codepen.io/JariCarlson/pen/pBYOjb

Answer 1

我看到您的 css 中的大多数样式都是使用 ID ( # ( 完成的。因此，同一组样式会多次重复，从而使您的CSS文件更大。更好的方法是创建一个具有所有常见样式的 CLASS，并在 HTML 中多次使用该类名。这样修改样式/维护将非常简单。这正是你现在面临的:)

因此，一种方法是使用 grid .通过这样做，他们的表格不需要留边距。所以

1. 删除所有表上的所有left:样式
2. 删除所有表上的display: none;
3. 如果position: absolute;使用width: 100%;

.CSS：

table {
   display: grid;
   justify-items: center;
}
#damagetablemario {
   /* display:none; */ /* remove */
   position:absolute;
   width: 100%; /*Add */
   top:700px;
   /* left:80px; */ /* remove */
   border-collapse:collapse;
}
#damagetablemario2 {
   /* display:none; */ /* remove */
   position:relative;
   top:400px;
   /* left:110px; */ /* remove */
   border-collapse:collapse;
}
#damagetablemario3 {
   /* display:none; */ /* remove */
   position:relative;
   top:450px;
   /* left:540px; */ /* remove */
   border-collapse:collapse;
   margin-bottom:200px;
}

Answer 2

将 left 属性替换为 0 并将此 CSS 属性添加到table

table {
    display: flex;
    justify-content: center;
}

您也可以尝试transform: translateX(-50%);

Answer 3

不要使用 display： block; 作为你的表。使用显示：表;删除左边距并设置边距：自动;