레이블과 텍스트 영역을 정렬하려면 어떻게 해야 합니까?

레이블과 텍스트 영역을 정렬하려면 어떻게 해야 합니까?

내 코드는 다음과 같이 끝납니다.

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

이 두 가지를 모두 일부 컨테이너 요소에 넣은 다음 컨테이너 요소를 통해 정렬을 적용해야 합니다.

예:

.formfield {
  display: flex;
  align-items: center;
}

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

텍스트 영역을 레이블로 묶고 텍스트 영역 스타일을 다음으로 설정합니다.

vertical-align: middle;

페이지의 모든 텍스트 영역에 대한 마법이 있습니다:)

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

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

1. 설정height당신의 라벨을 동일하게.height여러 줄 텍스트 상자로 표시합니다.

2. css 클래스 추가.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>
   

텍스트 영역 상자를 텍스트 영역이 아닌 레이블에 맞춥니다.

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

textarea{
    vertical-align: middle;
}

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

사용하다vertical-align:middle당신의 CSS에.

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

사용해 보십시오.

textarea { vertical-align: top; }​ 

td 요소의 높이를 설정해 보십시오.

vertical-align: middle; 

스타일이 적용되는 요소가 상위 요소 내에서 정렬됨을 의미합니다.td의 높이는 내부 텍스트 높이만 될 수 있습니다.

언급URL : https://stackoverflow.com/questions/1839403/how-do-i-align-a-label-and-a-textarea