Html 将文本定位到图像的同一级别 我试图把一个文本放在一个图像的中间高度，但是页边的顶部或页边的底部不能按我的意愿工作。

有什么建议吗

我创建了一个JSFIDLE来显示工作-

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

HTML

---

您可以使用

.icon2text

上的

垂直对齐

属性并将其设置为顶部：

---

您可以使用

.icon2text

上的

垂直对齐

属性并将其设置为顶部：

添加

.topMenu-bg2显示\隐藏\登录{ valign：中间； }

添加

.topMenu-bg2显示\隐藏\登录{ valign：中间；

---

}

如果用span替换p标记，并从li项中移除顶部填充和从a标记中移除顶部填充，则应全部对齐。

如果用span替换p标记，并从li项中移除顶部填充和从a标记中移除顶部填充，则应全部对齐

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

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

}