将标签与textarea对齐

Question

我有一些textareas和文本框。我的文本框与标签对齐，但在textareas的情况下，标签位于textareas的底部。请看附图。对应于textareas的标签在较低的线与textareas对齐。

如何将我的标签与textareas或textareas的中间行对齐。

CSS和HTML代码

<style>
    b {
        display: inline-block;
        width: 15%;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        margin-bottom: 5px;
    }
</style>
<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY" />
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" />
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>

Answer 1

Addign vertical-align：top to b tag应该这样做。

并且textareas不是自我关闭，添加了</textarea>

    b {
        display: inline-block;
        width: 15%;
        vertical-align: top;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    b {
      
    }

<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY"></textarea>
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" ></textarea>
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>

Answer 2

将display:flex;添加到div以创建弹性框，并margin:auto 0;添加b以使其垂直对齐

＆＃13;

＆＃13;

b {
        display: inline-block;
        width: 15%;
        margin:auto 0;
    }

    .upper-case {
        text-transform: uppercase;
    }

    .txtbox {
        width: 300px;
    }

    .txtarea {
        width: 600px;
    }

    .div_labels {
        text-align: left;
        width: 100%;
        font-size: 13px;
        display:flex;
        margin-bottom: 5px;
    }

＆＃13;

<div class="div_labels">
<b>Medical History :</b>
<textarea rows="4" runat="server" id="textareaMedHistory" class="upper-case txtarea" placeholder="MEDICAL HISTORY"></textarea>
</div>
<div class="div_labels">
<b>Diagnosis :</b>
<textarea rows="4" runat="server" id="textareaDiagnosis" class="upper-case txtarea" placeholder="DIAGNOSIS" ></textarea>
</div>
<div class="div_labels">
</div>
<div class="div_labels">
<b>ICD :</b>
<input type="text" id="inputTextICD" runat="server" class="upper-case txtbox" placeholder="ICD"/>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需添加float：left;到b标签样式