链接图标根据浏览器和操作系统更改div中的垂直位置。
链接图标根据浏览器和操作系统更改div中的垂直位置。
提问于 2014-08-22 03:34:25
我正在尝试为移动屏幕创建一个简单的3行菜单下拉菜单。我有一些有用的东西，但在不同的设备上看起来不一致。图标的垂直定位取决于操作系统和浏览器版本。图标应该垂直居中，但我看到：
- Linux -desktop
- 火狐-略低垂直对中。
- 铬-似乎在中间。
- Windows 8 -desktop
- 火狐-似乎在中间。
- 9-11 -似乎在中间。
- Android
- 火狐-非常低的垂直对中。
- 铬-略低的垂直对中。
下面是示例HTML
<div id="nav">
<div class="mobile-bars">
<a href="#">≡</a>
</div>
</div>和示例CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}这里是琴键。为什么三线图标不保持垂直中心？
回答 1
Stack Overflow用户
发布于 2014-08-22 03:46:10
使用line-height: 50px;，等于父(div.mobile-bars) - 试试看的高度。
<div id="nav">
<div class="mobile-bars">
<a href="#">≡</a>
</div>
</div>CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
line-height: 50px;
}编辑的
如果在<meta charset="utf-8">元素中有<head>，并且使用CSS属性line-height: 50px;不能解决问题，那么我建议您使用Image而不是html字符，如果您真的担心Firefox on Linux and Android (图标的垂直位置)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25439140
复制相关文章
相似问题
腾讯云开发者
