html - td 内的 div - 垂直对齐 : middle. 不起作用

Question

我知道这个问题有很多答案，但我找不到解决我问题的好答案。

所以，我在 td 中有一个 div。我想要的只是将 div 设置到 td 的中间，是的，就这么简单!

为方便起见，我添加了这张图片:

.tdClass{
  vertical-align:middle;
}
    
.divClass{
  display:inline;
  vertical-align:middle;
}

<table border=1>
    <tr>
      <td>
        first field:
      </td>
      <td>
      <textarea rows="4" cols="50"></textarea>
        <div class="divClass">
        VERTICAL CENTER???
        </div>
      </td>
    </tr>
    </table>

Answer 1

使用display: flex 来显示更大的表格数据字段。

这是更新后的代码。

HTML 和 CSS

.tdClass{
  vertical-align:middle;
}

.divClass{
  display:inline;
  vertical-align:middle;
}
.text-section{
  display: flex;
  align-items: center;
}
.divClass{
  font-size: 12px;
}

<table border=1>
<tr>
  <td>
    first field:
  </td>
  <td class="text-section">
  <textarea rows="4" cols="50"></textarea>
    <div class="divClass">
    VERTICAL CENTER???
    </div>
  </td>
</tr>
</table>

这是更新的 Demo