Làm cách nào để căn chỉnh nhãn và vùng văn bản?

Mã của tôi kết thúc như sau:

             XXXXX
             XXXXX
Description: XXXXX

Tôi muốn:

             XXXXX
Description: XXXXX
             XXXXX

"Mô tả" đôi khi kéo dài nhiều dòng.

Mã:

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

Bạn cần đặt cả hai vào một số phần tử vùng chứa và sau đó áp dụng căn chỉnh trên đó.

Ví dụ:

.formfield * {
  vertical-align: middle;
}

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

Chỉ cần bọc vùng văn bản bằng nhãn và đặt kiểu vùng văn bản thành

vertical-align: middle;

Đây là một số phép thuật cho tất cả các textareas trên trang :)

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

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

1. Đặt heightnhãn của bạn giống heightvới hộp văn bản nhiều dòng.

2. Thêm cssClass .alignTop{vertical-align: middle;}cho điều khiển nhãn.

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

Sử dụng vertical-align:middletrong CSS của bạn.

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

Căn chỉnh hộp vùng văn bản với nhãn, không phải nhãn với vùng văn bản,

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

textarea{
    vertical-align: middle;
}

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

Thử đi:

textarea { vertical-align: top; }​ 

Hãy thử đặt chiều cao trên các phần tử td của bạn.

vertical-align: middle; 

có nghĩa là phần tử mà kiểu được áp dụng sẽ được căn chỉnh trong phần tử mẹ. Chiều cao của td có thể chỉ cao bằng văn bản bên trong.