Align image with input box

HTML & CSS
1 
<style>
input:focus::placeholder {
  color: transparent;
  margin-bottom: 0px;
}
</style>
<input type="text" size="25" name="user" style="height:40px; width:600px; font-size:14pt; color:#4c659b;"  placeholder="Info here">
<input type="image" value="Submit" src="images/image.png" border=0"></form>

How do you align the image.png with the bottom of the input box for the text?

Thanks for your help.

2

Hi,
vertical-align will take care of that.


input {
   vertical-align:bottom;
}

If for some reason you need to target just the type=image you can use the attribute selector

input[type="image"] {
    vertical-align:bottom;
}
1 Like
3

Thank you - that did it!

1 Like
4

While your at it, go ahead and move your inline styles out of the input too.
It will make things easier to manage.

input[type="text"] {
   height:40px;
   width:600px;
   font-size:14pt;
   color:#4c659b;
}
input[type="image"] {
    vertical-align:bottom;
    border:none;
}


<input type="text" size="25" name="user" placeholder="Info here">
<input type="image" value="Submit" src="http://via.placeholder.com/60x60">
1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.