html - 如何将子图像与提交按钮对齐

Question

我有一张用于提交按钮的图片。无论我做什么，图像都会稍微向右对齐并低于显示页面上的按钮“框架”，代码如下：

button {
  width: 114px;
  height: 30px;
}

button img {
  border: none;
  padding-left: 0;
  margin-left: 0;
  vertical-align: middle;
}

<button type="submit" name="acctmntbtn">
    <img name = "acctmntimg" src = "btns/view.jpg" width = "114" height = "30">    
    </button>

如何让图像在按钮上完美对齐？

Answer 1

事实证明，不必担心按钮的视觉“框架”与图像不完全对齐，您只需将 CSS3 中的按钮属性设置为边框：无；

Answer 2

Remove the width and height style for the < button > element.

button
{
	display: contents;
}
button img
{
  border: none;
  padding-left: 0;
  margin-left: 0;
  vertical-align: middle;
}

<button type="submit" name="acctmntbtn">
<img name="acctmntimg" src="btns/view.jpg" width="114" height="30">    
</button>