height = line-height 不居中（偏上、偏下）的问题

最新推荐文章于 2025-05-20 23:31:36 发布

Shimeng_1989

最新推荐文章于 2025-05-20 23:31:36 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Shimeng_1989/article/details/109451709

html 同时被 3 个专栏收录

11 篇文章

订阅专栏

css

8 篇文章

订阅专栏

浏览器 - 字体

1 篇文章

订阅专栏

博客主要讲述了Mac电脑上页面文字偏下问题。尝试多种CSS方法无果后，发现是字体原因，Windows用Helvetica字体，Mac用Helvetica Neue字体，设置height = line-height时会偏下。解决办法一是用同一字体Helvetica，二是去掉不居中字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景：mac电脑上都偏下问题。

尝试的方法：1、找了好久，试了很多方法：如 display:table(父div），display:table-cell;vertical-align:middle(子div），子div中无法居中。

2、使用伪元素等。最后发现是字体的原因（如下）

原因：

body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

在window上，识别并使用的是 Helvetica字体。mac上，识别使用的是Helvetica Neue字体。页面设置的 height = line-height 时，都会略微偏下。而并不是css样式设置的问题。

解决：1、使用同一字体 Helvetica （ window下使用Helvetica Neue字体也会出现偏下问题），其他字体可以自行尝试选择。

2、去掉不居中的字体的字体。

/* 
    方法一：使用同一字体
*/
body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

/* 
    方法二：去掉不居中的字体的字体 
*/
body {
    font-family:  Helvetica
}

参考：https://zhuanlan.zhihu.com/p/25808995