web-dev-qa-db-ja.com

ラベルとテキストエリアを整列するにはどうすればよいですか？

のようになります

             XXXXX
             XXXXX
Description: XXXXX

が欲しいです

             XXXXX
Description: XXXXX
             XXXXX

「説明」は複数行にわたる場合があります。

コード：

<p class="DataForm">

<label>Blah blah blah Description:</label>

<asp:TextBox ID="txtBlahblahblahDescription" runat="server" TextMode="MultiLine"  Rows="8" Columns="50"></asp:TextBox><br />

</p>

CSS：

.DataForm
{

}

.DataForm label
{
    display: inline-block;
    font-size:small;
    margin-left:5px;
    width:5%;
    min-width:60px;
}

.DataForm input
{
    margin-right:9px;
    display: inline-block;
    width:21%;
    min-width:30px;
}
htmlcss
80
NibblyPig

両方のコンテナ要素にそれらを配置してから、その上に配置を適用する必要があります。

例えば：

.formfield * {
  vertical-align: middle;
}
<p class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</p>
103
BalusC

Textareaをラベルでラップし、textareaスタイルを

vertical-align: middle;

ページ上のすべてのテキストエリアにいくつかの魔法があります:)

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

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>
14
Rado
  1. ラベルのheightを複数行テキストボックスと同じheightに設定します。

  2. ラベルコントロールにcssClass .alignTop{vertical-align: middle;}を追加します。

    <p>
    <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
    <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
    <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
    ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
</asp:RequiredFieldValidator>
4
Charlie

CSSでvertical-align:middleを使用します。

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>
3
Peter Stuifzand

ラベルをテキスト領域に合わせるのではなく、テキスト領域ボックスをラベルに合わせます。

label{
    width:180px;
    display:inline-block;
}

textarea{
    vertical-align:middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>
2
zefram

これを試して：

textarea { vertical-align: top; }​
1
vaibhav jain

Td要素に高さを設定してみてください。

vertical-align: middle;

は、スタイルが適用される要素が親要素内に配置されることを意味します。 tdの高さは、内部のテキストと同じ高さである場合があります。

0
h4xnoodle