div里面的td - vertical-align：middle。不工作

Question

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

所以，我在td里面有一个div。而我想要的就是div将设置在td的中间，是的那么简单！

为方便起见，我要添加此图片：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display: flex用于较大的table-data字段。

这是更新的代码。

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

Answer 2

＆＃13;

＆＃13;

table{
  width: 100%;
}
.tdClass{
  vertical-align:middle;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先，默认情况下，表格标签是垂直中心。其次，你写过.tdClass并且从未在任何地方使用它。

https://jsfiddle.net/wazmgz3g/1/

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

请访问这个JS小提琴并检查这是否符合您的期望。如果有，请复制它。

谢谢。