表和H1不對齊

Question

為什么我的H1和桌子都沒有對准中心？ 我希望我的H1 ID和我的桌子都以一個和另一個居中，我在下面貼了一張圖片，顯示我希望網站的外觀及其當前狀態。 我嘗試了text-align：center; 來轉移我的H1 ID和我的桌子，但它似乎不起作用，我還嘗試使用我的桌子將我的H1居中，但這也沒有用。 我不確定如何解決該問題以及解決該問題所需要做的工作。

的HTML

  <h1 id="meetsh1">Recent Meets</h1>
  <table align="center">
    <tr>
      <th>Date</th>
      <th>Teams</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>03/03/18</td>
      <td>Harrison at NYS Championships (Finals)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>03/02/18</td>
      <td>Harrison at NYS Championships (Prelims)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/13/18</td>
      <td>Harrison at Section I Championships (Finals)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/12/18</td>
      <td>Harrison at Section I Championships (Prelims)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>02/08/18</td>
      <td>Harrison at Section I Championships (Dive)</td>
      <td>-</td>
    </tr>
    <tr>
      <td>01/29/18</td>
      <td>Harrison VS Ossining</td>
      <td>53-41</td>
    </tr>
  </table>

的CSS

#meetsh1 {
  text-align: center;
  padding-top: 30px;
  font-weight: bolder;
  text-decoration: underline;
  color: #000000;
  font-size: 25px;
}

table {
  border-collapse: collapse;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

我的網站目前的外觀。

我希望它看起來如何。

傑菲德爾

Answer 1

表和標題實際上居中。 問題在於外部列的計算大小略有不同。 因此，中心列未居中。

為了解決這個問題，您可以在“日期”和“分數”列中添加一個類，並通過CSS設置固定寬度。

<tr>
  <th class="same-size-col">Date</th>
  <th>Teams</th>
  <th class="same-size-col">Score</th>
</tr>

並在您的CSS文件中：

.same-size-col {
   width: 15%; /* or e.g. 100px */
}

或者您使用th:first-child, th:last-child ，這可以使您的html保持整潔。

Answer 2

第一列比最后一列大一點。 因此，中間列位於兩個大小不等的列之間。 將此添加到您的CSS：

th:first-child, th:last-child{ 
    width: 175px; /* fixed width! */
}

列大小會根據其中的文本自動調整。