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

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

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

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

Answer 2

我看到您CSS中的大多数样式都是使用ID（#）完成的。因此，同一组样式会重复多次，这会使您的CSS文件更大。更好的方法是使用所有通用样式创建一个CLASS，并在HTML中多次使用该类名称。通过这种方式修改样式/保持将非常简单。这就是您现在正面临的问题：）

因此，执行此操作的一种方法是使用grid。这样一来，您的表格就无需留有页边空白了。所以

删除所有表上的所有left:样式
删除所有表上的display: none;
如果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 3

不使用display：block;为您的桌子。使用显示：表；左移并设置边距：自动；

有没有办法在此Codepen中将表格/图像居中？

3 个答案: