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

Posted 2023-03-05

【中文标题】为啥文本会沉到表格单元格的底部？

【英文标题】：Why does text sink to the bottom of a table cell?为什么文本会沉到表格单元格的底部？

【发布时间】：2011-10-12 11:39:42

【问题描述】：

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

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

【参考方案1】：

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

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

您想更改该行上 textarea 的位置，但您可以这样做：

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

【参考方案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>