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

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>

原文由 c0deBr0 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 dom_ahdigital 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不要使用 <br> 布局标签 - 这是不行的！它会弄乱你在垂直对齐和顶部/底部填充和边距方面所做的任何尝试，就像你问题中的代码一样。

全部擦除它们并改用顶部和底部填充。

如果仍然需要，请使用 vertical-align ，但在大多数情况下您不需要它。并为 --- 中的单元格使用 tbody td 标签，而不是 th 。

 body {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: black;
    background-size: 100%;
    padding:0;
}
#myWebPage > h3 {
  padding: 40px 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 0;
  /*padding: 30px;*/
  text-align: center;
  vertical-align: middle;
}

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

 <div id="myWebPage">
  <h3>Page title here</h3>
  <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</td>
        <td align="left" width=35%;>999-999-9999</td>
      </tr>
      <tr>
        <td align="left">Resource 2</td>
        <td align="left">888-888-8888</td>
      </tr>
      <tr>
        <td align="left">Resource 3</td>
        <td align="left" width=35%;>777-777-7777</td>
      </tr>
    </tbody>
  </table>
</div>

原文由 Johannes 发布，翻译遵循 CC BY-SA 3.0 许可协议