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;
}

What my website currently looks like.

How I want it to look.

Jfiddle

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! */
}

列大小会根据其中的文字自动调整。

表和H1不对齐

2 个答案: