在网格项内垂直对齐文本

Question

垂直对齐文本总是很棘手。

下表在<td>标记内垂直对齐文本。我想使用CSS网格复制此行为。

此代码段显示默认情况下在CSS表中垂直对齐的文本：

td {
  border: 2px solid red;
}

<table>
  <tr>
    <td>
      <pre>
        multi-line
        item
      </pre>
    </td>
    <td>Hello World</td>
  </tr>
</table>

此代码实现了CSS Grid，但没有在<td>标签内垂直居中放置文本。

tr {
  display: grid; 
  grid-template-columns: auto auto; 
}

td {
  border: 2px solid red;
  vertical-align: middle; /* DOES NOT WORK */
  justify-content: center; /* DOES NOT WORK */ 
}

<table>
  <tr>
    <td>
      <pre>
        multi-line
        item
      </pre>
    </td>
    <td>Hello World</td>
  </tr>
</table>

Answer 1

只需弄清楚。

使用align-self在CSS网格项内对齐内容。

td {
   align-self: center;
}