How do i get a button with an image inside to line up vertically with an input box?

Jacob Braun 0
Viewed 35

When I add a button next to my input it works fine unless I use a image instead of text.

input {
  height:32px;
  padding: 0;
}
button {
  width: 32px;
  height: 32px;
}
img {
  width: 20px;
}
<input type="text"><button type="submit"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-right-arrow-icon-png-image_956430.jpg"></button>

css html
2 Answers

Try to wrap them with a parent div, which has display: flex; and align-items: center;.

chrisjung0

you can try this

input {
  height:32px;
  padding: 0;
}
button {
  width: 32px;
  height: 32px;
}
img {
  width: 20px;
}
.container {
  display: flex;
  align-items: center;
}
<div class="container">
  <input type="text"><button type="submit"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-right-arrow-icon-png-image_956430.jpg"></button>
</div>

Su'udi Khoirul Anam0
Related