アンカーのタグに line-height も指定する必要があります
ここに完全なソリューションがあります //HTML
<div class="div_mn">
<ul>
<li><a href="#" style="padding-top: 7px; padding-bottom: 7px;"><img height="22" width="22" src="http://images.wikia.com/uncyclopedia/images/7/7d/Icons-flag-us.png" alt="Smiley face" /> </a>
</li>
<li><a href="#">Mnu Itm 1</a>
</li>
<li><a href="#">Mnu Itm 2</a>
</li>
</ul>
//CSS
* {
margin: 0;
padding: 0;
}
.div_mn {
text-align: center;
position: relative;
padding: 10px;
min-width: 200px;
}
.div_mn ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}
.div_mn ul li {
float: left;
list-style: none;
}
.div_mn ul li a {
font-family: Arial;
font-size: 12px;
padding: 11px 35px;
text-decoration: none;
display: block;
color: #FFFFFF;
line-height:20px; ////give line height approx or exact your image height
background: -webkit-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -moz-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -ms-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: -o-linear-gradient(top, #0176B4, #005e90 49%, #005e90 50%, #00527d);
background: linear-gradient(to bottom, #0176B4, #005e90 49%, #005e90 50%, #00527d);
}
更新フィドル