Why does text sink to the bottom of a table cell?

<table>
<tr>
    <td>
  开发者_如何转开发      random text here
        <textarea value=""></textarea>
    </td>
</tr>
</table>

In the browser the text is at the bottom. How do I make it center or to top? vertical align on TD doesn't seem to work.

---

Text is rendered along a line. Inline elements (such as the textarea) are also rendered on that line.

The text is at the bottom of the table cell because it sits on the same line that the textarea sits on and that textarea takes up the entire height of the cell.

You want to change the position of the textarea on that line, but you can do so:

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

---

gathcea:

You can put your text in a row above:

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

Or use a line break to put the text area underneath it:

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