【问题标题】:Minimialist Site: Header flexbox text vertically centered on Chrome desktop, but not Chrome mobile. Why?极简主义网站:标题 flexbox 文本垂直居中于 Chrome 桌面,但不是 Chrome 移动版。为什么?
【发布时间】:2020-06-10 23:36:23
【问题描述】:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    <link href='https://fonts.googleapis.com/css?family=Niramit' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="main">
        <div class="bar">
            <div id="title" class="header-text">title</div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/uey85nbj/

Chrome 桌面:上方 27 像素,下方 29 像素

Chrome 移动版:上方 40 像素,下方 31 像素

【问题讨论】:

  • 你能改变字体并检查一下吗,看起来字体顶部有某种额外的填充

标签: html css flexbox centering


【解决方案1】:

如果您在包含您的文本的 div 上放置背景颜色,您将了解正在发生的事情(这就是我在 Firefox 和 Chrome 桌面上的样子,所以我不知道如何你得到了你的第一张截图):

该 div 垂直居中非常好,但由于您的文本全部为小写,因此光学对齐已关闭。字体并不总是以您期望的方式占用空间,部分原因是字体中的大多数字符不会占用上方和下方的所有空间。文本与空间的交互方式会随着字体的变化而变化。将“title”更改为“TITLE”并查看它的外观。

在这里调整 line-height 可以为您提供帮助,或者您可以执行 position: relative; top: -2pxtransform: translateY(-2px) 或任何最有帮助的操作。

我也建议不要将 mm 作为一个单位;像素、ems/rems、百分比和视口单位可以更好地代表页面中事物的测量方式。

【讨论】:

  • 如果这是正确的行为,为什么我们认为它在不同的浏览器上是不同的?
  • 不确定。就像我说的,你的移动版 Chrome 屏幕截图是我在桌面版 Chrome 和桌面版 Firefox 上看到的,所以我无法重现你的测试用例。我唯一能想到的可能是它与mm 单位有关。
【解决方案2】:

正如@Akhil Aravind 建议的那样,字体似乎是问题所在。这是没有特殊字体的图像。

【讨论】:

    猜你喜欢
    • 2015-10-01
    • 2015-07-15
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 2016-05-05
    • 2018-05-29
    • 2015-03-14
    • 2013-06-01
    相关资源
    最近更新 更多