html - css中的 anchor 图像问题

Question

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

问题:

1. 图像高度将根据 anchor 高度和每个元素进行调整 anchor 必须在中间。
2. 箭头会向下或向右，每个箭头都适合向右。

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>

CSS 代码:

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

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

a:hover {
  text-decoration: none;
}

plunker

Answer 1

这是有效的解决方案:

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

还有 CSS:

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;
}

这里的技巧是在 anchor 标记上使用 line-height 以及在 img 上使用 vertical-align:middle。

请注意，您不能使用 // 在 CSS 中进行注释。仅支持/*... */

这是 demo .