레이블과 텍스트 영역을 어떻게 정렬합니까?

레이블과 텍스트 영역을 어떻게 정렬합니까?

---

마치

             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 * {
  vertical-align: middle;
}

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

---

텍스트 영역을 레이블로 감싸고 텍스트 영역 스타일을

vertical-align: middle;

다음은 페이지의 모든 텍스트 영역에 대한 몇 가지 마술입니다.)

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

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

---

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>
   

---

vertical-align:middleCSS에서 사용하십시오 .

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

---

텍스트 영역 상자를 레이블이 아닌 레이블에 정렬합니다.

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

textarea{
    vertical-align:middle;
}

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

---

이 시도:

textarea { vertical-align: top; }​ 

---

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

vertical-align: middle; 

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

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