Question

<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>

Picture of what this ends up looking like

如何制作它以使盒子左边的文字与盒子的中间保持水平，即使它被拖动？它可以用CSS完成，还是需要Javascript？

Answer 1

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

请参阅http://jsfiddle.net/pctVh/2

Answer 2

您可以将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;
}

还有一个小小的演示：little link。

我希望有所帮助！

Answer 3

您需要将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>

如果您想在文字上设置宽度/高度，请将display: inline-block添加到.middletext课程。

Answer 4

这确实有效

<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>

如何使文本与textarea的中间保持一致？

4 个答案: