gpt4 book ai didi

android - 链接图标根据浏览器和操作系统更改 div 中的垂直位置

转载 作者:太空宇宙 更新时间:2023-11-04 13:01:22 24 4
gpt4 key购买 nike

我正在尝试为移动屏幕创建一个简单的 3 行菜单下拉菜单。我得到了一些有用的东西,但它在不同设备上看起来并不一致。图标的垂直位置根据操作系统和浏览器版本而变化。该图标应垂直居中,但我看到:

  • Linux - 桌面
    • Firefox - 垂直居中略低。
    • Chrome - 似乎在中间。
  • Windows 8 - 桌面
    • Firefox - 似乎在中间。
    • IE 9-11 - 似乎在中间。
  • 安卓
    • Firefox - 非常低的垂直居中。
    • Chrome - 垂直居中略低。

这是示例 HTML

<div id="nav">
<div class="mobile-bars">
<a href="#">&equiv;</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;
}

这里是 jsfiddle link .为什么三行图标不能保持垂直居中?

最佳答案

使用 line-height: 50px; , 等于 parent 的高度 (div.mobile-bars) - TRY DEMO

HTML

<div id="nav">
<div class="mobile-bars">
<a href="#">&equiv;</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 unicode 字符,如果你真的担心 Firefox on Linux and Android , 图标的垂直位置。

关于android - 链接图标根据浏览器和操作系统更改 div 中的垂直位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25439140/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com