如何对齐标签和文本区？

我的代码结尾是这样的:

             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;
}
207408 次浏览
小开

Use vertical-align:middle in your CSS.

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

Try setting a height on your td elements.

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.

小开
最佳答案

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>

小开
  1. Set the height of your label to the same height as 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>

小开

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

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

Try this:

textarea { vertical-align: top; }​
小开

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>

提交答案