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

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>代码即可。 E.g。

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

Answer 2

请尝试这样做，为什么要将<br>和<td>放到<th>

表<td>元素是表的数据容器。 HTML
标签是 换行符标记如下：

This text contains<br>a line break.

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

详细了解 html表格 https://www.w3schools.com/html/html_tables.asp

Answer 3

为height元素定义th值

使用 length unit 值（例如：th）为表头单元格（65px）定义显式（绝对）高度，然后声明{{1}对这些元素进行规则。

代码段示范：

vertical-align

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;
  /* additional */
  height: 65px;
}

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

Answer 4

不要使用<br>标签进行布局 - 这是不行的！无论你尝试垂直对齐和顶部/底部填充和边距，都会陷入困境，就像你问题中的代码一样。

将它们全部删除，然后使用顶部和底部填充。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;