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

そしてちょっとしたデモ: little link .

それが役に立ったことを願っています！

于 2012-08-26T20:29:07.593 に答える
2

You need to set both the text and textarea to vertical-align: middle. Example 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 に答える