web-dev-qa-db-ja.com

textareaラベルの垂直配置：中央

このテキスト領域のラベルをテキストボックスの中央に配置しようとしていますが、機能しません。出力は次のようになります。

          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx      
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx    
Synopsis: xxxxxxxxxxxxxxxxxxxxxxxxxxxx

これが私が試したコードです。 TY！

<style>
label textarea{
 vertical-align: middle;
}
</style>

<label>Synopsis: <textarea style="border: none" rows="7" cols="60">$v_Synopsis</textarea></label>
htmlcsstextareavertical-alignment
9
Mike

あなたはこのようにそれを行うことができます：

label { display:inline-block; vertical-align:central; }

textarea { display:inline-block; vertical-align:middle; }
1
Rogo

これでうまくいきました。最初にテキストエリアが右にフロートされ、次に単語「アドレス」がその前に表示されます。逆順ですが正しく表示されます

<p>
<span style="float:right;"><textarea rows="3" cols="32" name="Add"></textarea></span>
<span style="float:right;">Address</span>
</p>

表示するには：

Address┌──────────────┐
0
fiedler

これは常に機能し、どちらかにラベルを配置する柔軟性があります。上、中、下

HTML：

<div id="mydiv">
    <label for="mytextarea">My Label</label>
    <textarea name="mytextarea"></textarea>
</div>

CSS：

#mydiv{
    display: table-cell;
}

label, textarea{
    display: inline-block;
    vertical-align: middle; /** Can be switched to 'top' if you so wish **/
}
0
KE50

あなたが忘れてしまった ： "、"

    <style>
label, textarea{
 vertical-align: middle;
}
</style>

<label>Synopsis: </label> <textarea style="border: 1" rows="3" cols="10"></textarea>
0
ColoO