How to display input in the middle?

HTML & CSS
1

In the code below, how to display the first input (login_username) in the middle when we have long text in the label ?

Thanks


<div class="easyui-panel" title="Test Account"  style="height:100px;padding: 3px;" data-options="collapsible:true,fit:false,doSize:false," >
                     <div>
                         <label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;" for="login_username">User Name Long Long Long</label>
                         <input style="width:75%;" type="text" name="login_username" id="login_username">
                     </div>
                     <div style="margin-top: 3px;">
                         <label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;" for="login_username1">User</label>
                         <input style="width:75%;" type="text" name="login_username1" id="login_username1">
                     </div>
                 </div>
2

Hi,

I’m not quite sure what you mean by “in the middle” as such but if you want the text centred then text-align:center on the label will do that.


<label style="width:20%; display: inline-block; font-size:12px; margin-right: 5px;text-align:center" for="login_username">User Name Long Long Long</label>

However that may look a bit odd as the other labels are left aligned so I feel you must mean something else?

3

no, this is not what I want. In the first line, the input should be in the center in alignment with the text in the left.

4

I’m having trouble understanding you, but I’m guessing this is what you mean

NOT LIKE

really long long label [input]
label [input]

BUT MORE LIKE

really long long label  [input]
label			[input]
5

If I’m not mistaken the code is already like that as the labels have a width :slight_smile:

I’m wondering whether the OP means the vertical alignment rather than horizontal?

If so then the label and input should be set to vertical-align:middle.


label,input{vertical-align:middle}
6

Hmmm, maybe ???

a
really
long	[input]
long
label

label	[input]
7

Yes that’s what I was thinking :slight_smile: