CODEWITHSUNDEEP
htmlcss
user4221591
user4221591

Reputation: 2150

align labels with textarea

enter image description here

I've some textareas and text boxes. My text boxes are aligned with the labels but in case of textareas, the labels are at the base of the textareas. Please see the figure attached. The labels corresponding the textareas are aligned at lower line with the textareas.

How can I align my labels to be in the same line with the textareas or in the middle line of the textareas.

CSS and HTML code

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

Upvotes: 0

Views: 1680

Answers (3)

jafarbtech
jafarbtech

Reputation: 7015

add display:flex; to the div to make a flexbox and margin:auto 0; in b to make it aligned centrally vertical

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

Upvotes: 1

dvr
dvr

Reputation: 895

Addign vertical-align: top to b tag should do it.

And textareas arent self closing, added </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>

Upvotes: 1

Daniel Gomez
Daniel Gomez

Reputation: 26

just add float:left; to the b tag style

Upvotes: 0

Related Questions