Html css中的锚图像问题

我已经尝试了很多，但没有找到任何解决办法，所以这可以对我有帮助。我有一份菜单，如下所示。菜单有多个菜单项，每个菜单项都是由图像、文本和箭头组成的锚定

问题：

图像高度将根据锚定高度和每个元素进行调整 锚的长度必须在中间

箭头将向下或向右，每个箭头都将向右

HTML代码：

<a href="javascript:void(0);" class="" data-toggle="dropdown">
  <span>
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png" alt="" />ADMIN
    <i class="fa fa-caret-down"></i>
  </span>
</a>

a {
  text-decoration: none;
  width: 300px;
  border: 1px solid red;
}

img {
  width: 1.5em;//do not fix.
}

a:hover {
  text-decoration: none;
}

---

以下是工作解决方案：

<a href="javascript:void(0);" class="" data-toggle="dropdown">
  <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png" alt="" /> ADMIN
  <div>
    <i class="fa fa-caret-down"></i>
  </div>
</a>

这里的技巧是使用锚定标记上的

线高度

，以及img上的

垂直对齐：中间

请注意，您不能在CSS中使用

/

进行注释。只有

/**/

这是你的电话号码
 告诉你真正想做什么，你可以在中使用
文本对齐
或
右对齐
css@saleemahmed，向下箭头需要对齐，图像需要合适
a {
  text-decoration: none;
  width: 300px;
  border: 1px solid red;
  display:inline-block;
  line-height: 1.5em;
}

a div{
  display:inline-block;
  float:right;
}

img {
  height: 1em;
  vertical-align:middle;
}