Question

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

Linux -desktop
- Firefox - 略低的垂直居中。
- Chrome - 似乎处于中间位置。
Windows 8 -desktop
- Firefox - 似乎处于中间位置。
- IE 9-11 - 似乎在中间。
的Android
- Firefox - 非常低的垂直居中。
- 镀铬 - 垂直居中略低。

以下是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。为什么三线图标不会垂直居中？

Answer 1

使用line-height: 50px;，等于父(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;
}

<强> [EDITED]

如果您在<meta charset="utf-8">元素中有<head>并且使用CSS属性line-height: 50px;无法解决您的问题，那么我建议您使用Image代替html unicode character，如果你真的担心Firefox on Linux and Android，图标的垂直位置。

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

1 个答案: