How do I align a label and a textarea?
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>
- Set the
height
of your label to the sameheight
as the multiline textbox. 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>
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>