2 
<html>
<body>

This should be level with the middle of the box!
<textarea id="id" name="name" rows="9" cols="50">Text is in here!</textarea>

</body>
</html>

这最终看起来像什么的图片。

如何使框左侧的文本与框的中间保持水平，即使它被拖动也是如此？可以用 CSS 完成，还是需要 Javascript？

4

4 回答 4

3

最简单的方法（如果你想避免使用表格）是浮动标签并将其行高设置为等于 textarea 高度：

见http://jsfiddle.net/pctVh/2

于 2012-08-26T20:11:33.270 回答
3

您可以将vertical-align属性与display: table-cell;. 这是一个示例，HTML：

<div class = "wrapper">
    <div class = "text">
        I'm in the middle! Glee is awesome!
    </div>
    <textarea id="id" name="name" rows="9" cols="20">Text is in here!</textarea>
</div>

CSS：

.wrapper {
    vertical-align: middle;
    display: table-row;    
}
.wrapper textarea {
    display: table-cell;
}
.text {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

还有一个小演示：小链接。

我希望这有帮助！

于 2012-08-26T20:29:07.593 回答
2

您需要将 text 和 textarea 都设置为vertical-align: middle. 示例 HTML：

.middletext {
  vertical-align: middle;
}

#id {
  vertical-align: middle;
}
<html>

<body>

  <span class="middletext">This should be level with the middle of the box!</span>
  <textarea id="id" name="name" rows="9" cols="50">Text is in here!</textarea>

</body>

</html>

If you want to set a width/height on the text, add display: inline-block to the .middletext class.

于 2012-08-26T20:44:31.677 回答
1

这确实有效

<table>
<tr>
   <td valign="center">This should be level with the middle of the box!</td>
   <td>
         <textarea cols="40" rows="20">Text is in here!</textarea>
   </td>
</tr>
</table>
于 2012-08-26T20:26:12.503 回答