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

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>

CodePudding user response：

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

CodePudding user response：

you can try this

input {
  height:32px;
  padding: 0;
}
button {
  width: 32px;
  height: 32px;
}
img {
  width: 20px;
}
.container {
  display: flex;
  align-items: center;
}

<div >
  <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>