将文本定位在与图像相同的级别上

Question

我正在尝试将文本放置在图像的中间高度，但边缘顶部或边距底部将无法正常工作。

有关此的任何提示吗？

我创建了一个JsFiddle来展示作品 - http://jsfiddle.net/HdW7Y/1/

如您所见，文本登录用户位于登录按钮下方。

HTML

<div id="topNav">
<ul>
<li class="topMenu-bg1 show_hide_contact">
<a href="#"></a>
</li>
<li class="topMenu-bg2 show_hide_login">
<a href="#" ><p class="icon2text">User Login</p></a>
</li>
</ul>
</div>  

CSS

#topNav li {
margin-top:5px;
padding-top:7px;
list-style:none;
float:left;
border-right:1px solid black;
}

.icon2text{ 
font-weight: bold;
font-size: 0.7em;
display: inline;

}

Answer 1

您可以使用vertical-align上的.icon2text属性并将其设置为顶部：

http://jsfiddle.net/HdW7Y/2/

Answer 2

添加

.topMenu-bg2 show_hide_login { VALIGN：中等; }

Answer 3

如果用一个跨度替换p标签并从li项目中删除顶部填充，并从a标签中删除顶部填充，则它应该全部排成一行。