div内td-垂直对齐：中间。不工作

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>

这是更新的演示