Anchor image issue in css - html

Question

I have tried lot but did not find any solution so that that can be helpful for me. I have a menu which look like as below. The Menu has multiple menu item and each item is an anchor that consists of image, text and arrow.
Problem:
Image height will fit according to anchor height and every element
of anchor must be middle.
Arrow would be down or right, every arrow will fit to right.
HTML CODE:
<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 CODE:
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

Here is the working solution:
<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>
And the 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;
}
The trick here is to use the line-height on anchor tag along with vertical-align:middle on the img.
Note that you cannot use // for commenting in CSS. Only /*... */ is supported.
Here is the demo.