Html 如何对齐标签和文本区域？

How do I align a label and a textarea?

提问by NibblyPig

My code ends up like:

我的代码最终如下：

             XXXXX
             XXXXX
Description: XXXXX

I want:

我想要：

             XXXXX
Description: XXXXX
             XXXXX

"Description" sometimes spans multiple lines.

“描述”有时跨越多行。

Code:

代码：

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

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

回答by BalusC

You need to put them both in some container element and then apply the alignment on it.

您需要将它们都放在某个容器元素中，然后在其上应用对齐方式。

For example:

例如：

.formfield * {
  vertical-align: middle;
}

<p class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</p>

回答by Rado

Just wrap the textarea with the label and set the textarea style to

只需用标签包裹 textarea 并将 textarea 样式设置为

vertical-align: middle;

Here is some magic for all textareas on the page:)

这是页面上所有文本区域的一些魔法:)

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

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

回答by Charlie

1. Set the heightof your label to the same heightas the multiline textbox.

2. Add the cssClass .alignTop{vertical-align: middle;}for the label control.

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

1. 将height标签的设置height为与多行文本框相同。

2. .alignTop{vertical-align: middle;}为标签控件添加 cssClass 。

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

回答by Peter Stuifzand

Use vertical-align:middlein your CSS.

vertical-align:middle在您的 CSS 中使用。

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

回答by zefram

Align the text area box to the label, not the label to the text area,

将文本区域框与标签对齐，而不是将标签与文本区域对齐，

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

textarea{
    vertical-align: middle;
}

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

回答by vaibhav jain

Try this:

尝试这个：

textarea { vertical-align: top; }? 

回答by h4xnoodle

Try setting a height on your td elements.

尝试在 td 元素上设置高度。

vertical-align: middle; 

means the element the style is applied to will be aligned within the parent element. The height of the td may be only as high as the text inside.

意味着应用样式的元素将在父元素内对齐。td 的高度可能只与里面的文本一样高。