2

我正在尝试将文本放置在图像的中间高度，但 margin-top 或 margin-bottom 无法按我的意愿工作。

对此有什么建议吗？

我创建了一个 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;

}
4

3 回答 3

2

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

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

于 2013-03-31T14:39:23.467 回答
1

添加

.topMenu-bg2 show_hide_login{ valign:middle; }

于 2013-03-31T14:41:55.243 回答
1

如果您将 p 标签替换为 span 并从 li 项目中删除顶部填充，并从 a 标签中删除顶部填充，则它们应该全部对齐。

于 2013-03-31T14:54:07.453 回答