是否有任何图像和锚标记的替代组合

Question

我有一个文字和一个图片，两者都是可点击的。所以我使用锚和图像标签。

这是一个代码。

myData.text = "<a style='color:#0000ff' onClick='func(event," + JSON.stringify(myData) + ")' href='javascript:void(0);'>"+Countary Data Connection +"</a>"+"<img src='Images/image.png' style='padding-left:2px' onClick='someFunc(event," + JSON.stringify(myData) + ")'></img>";

这是我的形象。

的Fiddler Fiddler 所有点击事件，一切都很好。我在这里有两个问题。

1. 我可以使用其他任何方式或标签，或者这是唯一的方法吗？ （锚+张图片）
2. 我的图片不是文字。如何使它成为联盟。 （如果我给padding-top，那么整个（文字+图像）都会下降。）如何解决这个问题。

Answer 1

将a和img包裹到span并将函数附加到父元素（span），并进行对齐，将vertical-align: middle;添加到{{1}默认情况下，内联元素与基线对齐，这就是为什么添加填充将两个元素都移动到底部的原因。

＆＃13;

＆＃13;

img

＆＃13;

img {
  vertical-align: middle;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将图像放入＆＃34; A＆＃34;标签和绑定功能＆＃34; A＆＃34;标签和是偏离当然图像需要垂直在中间，所以它将与文本平行。

<a href="javascript:void(0)" onclick='func(event," + JSON.stringify(myData) + ")' >Hello World <img src="https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/twitter-24.png" /></a>

img {
vertical-align : middle
}

Live demo here