td 內的 div - 垂直對齊：中間。 不工作

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到更大的 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>

這是更新的演示

Answer 2

 table{ width: 100%; } .tdClass{ vertical-align:middle; } .divClass{ display:inline; vertical-align:middle; } textarea{ display: inline-block; vertical-align: middle; }

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

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 小提琴並檢查這是否是您的期望。 如果是這樣復制它。

謝謝。