CODEWITHSUNDEEP
htmlasp.netcss
REZR.AMX
REZR.AMX

Reputation: 59

Middle align label & textbox using div

there.. i have asp.net webform app that has sever labels and textboxes aligned side by side.

If you'll have a look below.

desiner

i want the label text say for example complaint date to be aligned exactly to the middle of the textbox. like this.

a

Some more details: i have a one div left that holds lable's and right div that holds textbox. like so

<div class="left" style="height:50px;" runat="server" >
        <asp:Label ID="Label5" runat="server" Font-Bold="true" ForeColor="#0066ff" Text="Complaint Date"></asp:Label>
    </div>
<div class="right">
        &nbsp;<asp:TextBox ID="TextBox1" runat="server" TextMode="Date" Width="150px"></asp:TextBox>
   </div>

and my css to align them together is something like this..

.left {
height:25px;
width: 152px;
float: left;
text-align: right;
vertical-align:middle;
}

.right {

width: 43%;
margin-left: 10px;
float:right;
vertical-align:middle;
}

what other formatting do i have to do to make the label and text box be middle alinged? thanks in advance guys

Upvotes: 0

Views: 3430

Answers (3)

T J
T J

Reputation: 43156

You can make use of the ::before and ::after pseudo elements to achieve this. Apply display:block and set it's height to

((total height of the container div - height of contents)/2)

Check this FIDDLE

Upvotes: 1

Vel
Vel

Reputation: 731

Try this:

.left label {
    width:50px;
    margin:0 auto;
    display: block;
    line-height: 30px;
}

.right input[type="text"] {
    width:50px;
    margin:0 auto;
    height: 30px;
}

Upvotes: 0

Karim AG
Karim AG

Reputation: 2193

you have to give your labels and textboxes a fixed width and margin:0 auto; to horizontally align them. Try this:

.left label {
    width:50px;
    margin:0 auto;
}

.right input[type="text"] {
    width:50px;
    margin:0 auto;
}

Upvotes: 0

Related Questions