align image button and input box

Question

Im trying to align (reletive towards eachothers horizontal center) my image button with an input box but cant get it working.. all the examples I have seen online make use of a single image rather then a rollover image setup...

<body background="Images/Main_Background.png"> 

<center>
<a href="#"
   onclick="this.href = ('file:///V:/' + document.getElementById('prog_site').value + '/Tekeningen/Tekenwerk De Mar/Definitief/' + document.getElementById('prog_site').value + '.pdf' )"
   target="upper">

    <img src="Images/Zoek.png" border="0" alt="Form" width="40" height="40"
         onmouseover="this.src='Images/Zoek_Rollover.png'"
         onmouseout="this.src='Images/Zoek.png'"><input type="text" name="prog_site" id="prog_site" value="" /></Center>
    </img>

</body>

A working JSFiddle would be very useful

gvee
– gvee

2013-11-19 13:18:39 +00:00
Commented Nov 19, 2013 at 13:18 — gvee
– gvee, Commented Nov 19, 2013 at 13:18

Last1Here · Accepted Answer · 2013-11-19 13:24:13Z

1

Try something like: Fiddle

div.cont {
    text-align: center;
    line-height: 40px;
}
.cont img, .cont input{
    vertical-align: middle;
}

answered Nov 19, 2013 at 13:24

Last1Here

1,0792 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2768948 · Accepted Answer · 2013-11-19 13:24:27Z

0

You have some syntax errors:

Missing closing tag for a
img tag is self-closed tag

Also what's the problem? Image and input is aligned to each other. Some tips I think may help you:

Add line-height: css attribute for center tag to max height of it's elements. In this case 40px - image's height. ...

answered Nov 19, 2013 at 13:24

user2768948

Collectives™ on Stack Overflow

align image button and input box

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related