为什么文本会沉到表格单元格的底部？

Question

<table>
<tr>
    <td>
        random text here
        <textarea value=""></textarea>
    </td>
</tr>
</table>

在浏览器中，文本位于底部。如何使其居中或顶部？ TD 上的垂直对齐似乎不起作用。

Answer 1

文本沿着一条线呈现。内联元素（例如文本区域）也会在该行上呈现。

文本位于表格单元格的底部，因为它与文本区域位于同一行，并且文本区域占据了单元格的整个高度。

您想要更改该行上文本区域的位置，但您可以这样做：

textarea {
    vertical-align: middle; /* other values are available */
}

Answer 2

gathcea：

您可以将文本放在上面的一行中：

<table>
    <tr>
      <td> 
        <p>random text here</p>
      </td>
    </tr>
    <tr>
      <td>
        <textarea value=""></textarea>
      </td>
    </tr>
</table>

或者使用换行符将文本区域放在其下方：

<table>
    <tr>
      <td>
        <p>random text here</p>
        <br />
        <textarea value=""></textarea>
      </td>
    </tr>
</table>