html - 在表格标题中垂直居中文本

Question

我是 CSS 和 HTML 的新手，我正在尝试将表格标题中的一些文本垂直居中。目前，文本与表格单元格的顶部对齐。我对 vertical-align: middle; 没有成功，唯一的解决方案似乎是添加 padding-top 以匹配文本下方的空间。然而，这不是最好的解决方案，因为我想让文本紧贴表格单元格。任何想法表示赞赏。

body {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: black;
    background-size: 100%;
    padding:0;
}

.mytable {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  width: 80%;
}

.mytable thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  /*padding: 30px;*/
  text-align: center;
  vertical-align: middle;
}

.mytable tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 30px;
}

<div id="myWebPage" style="display:block">
  <br><br><br><br>
  <h3>Page title here</h3><br><br><br>

  <table class="mytable" align="center">
    <thead>
      <tr>
        <th><u>Resource</u><br><br><br></th>
        <th><u>Contact</u><br><br><br></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th align="left">Resource 1<br><br></th>
        <th align="left" width=35%;>999-999-9999<br> <br></th>
      </tr>
      <tr>
        <th align="left">Resource 2<br><br></th>
        <th align="left">888-888-8888<br><br></th>
      </tr>
      <tr>
        <th align="left">Resource 3<br><br></th>
        <th align="left" width=35%;>777-777-7777<br> <br></th>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你已经在你的 CSS 中做对了，只需删除你的 <br>标签。例如

<th><u>Resource</u></th>

当您在标题下手动插入行时，垂直对齐将不起作用。

完整示例

body {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: black;
    background-size: 100%;
    padding:0;
}

.mytable {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  width: 80%;
}

.mytable thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  /*padding: 30px;*/
  text-align: center;
  vertical-align: middle;
}

.mytable tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 30px;
}

<div id="myWebPage" style="display:block">
  <br><br><br><br>
  <h3>Page title here</h3><br><br><br>

  <table class="mytable" align="center">
    <thead>
      <tr>
        <th><u>Resource</u></th>
        <th><u>Contact</u></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left">Resource 1<br><br></td>
        <td align="left" width=35%;>999-999-9999<br> <br></td>
      </tr>
      <tr>
        <td align="left">Resource 2<br><br></td>
        <td align="left">888-888-8888<br><br></td>
      </tr>
      <tr>
        <td align="left">Resource 3<br><br></td>
        <td align="left" width=35%;>777-777-7777<br> <br></td>
      </tr>
    </tbody>
  </table>
</div>