CODEWITHSUNDEEP
htmlcssalignment
TheOne
TheOne

Reputation: 11159

How to align a text input with an image button?

I have a form where the last line of input fields is followed by 2 image buttons.

No matter what I try I can't seem to horizontally align the buttons with the field.

Here's all the code: http://jsfiddle.net/h3ZPk/

Upvotes: 5

Views: 12472

Answers (2)

Hidde
Hidde

Reputation: 11931

I don't often recommend this, but please use a table. They are old-fashioned, but they work VERY WELL for forms. 

<table>
  <tr>
    <td>Label1</td><td><input type="text" /></td><td></td><td></td>
  </tr>
  <tr>
    <td>Label2</td><td><input type="text" /></td><td></td><td></td>
  </tr>
  <tr>
    <td>Label3</td><td><input type="text" /></td><td><input type="button" /></td><td><input type="button" /></td>
  </tr>
</table>

EDIT:

http://jsfiddle.net/h3ZPk/6/

Upvotes: 3

j08691
j08691

Reputation: 207901

Add this rule:

#buttons img, #buttons input {
    vertical-align:bottom;
}

jsFiddle example.

Upvotes: 13

Related Questions