【CSS】解决height = line-height 文字不垂直居中（偏上、偏下）的问题

已于 2024-01-15 15:51:55 修改
阅读量941 收藏 7
点赞数 7
分类专栏： CSS 前端 文章标签： css 前端
于 2024-01-15 15:47:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33237207/article/details/135602139
版权
CSS 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
前端
11 篇文章 0 订阅
订阅专栏

解决办法1：

查看 font-family 属性，确认是否是因为字体而导致的不垂直居中问题。

其他小知识：

基线就是小写x字母的下边缘(线) 就是我们常说的 基线。line-height 属性设置的行高也就是定义的两行文字基线之间的距离!

参考文章：

height = line-height 不居中（偏上、偏下）的问题 - 代码先锋网

解决line-height=height元素高度但是文字并没有垂直居中的问题_lineheight等于height没有居中-CSDN博客


深入理解 CSS：字体度量、line-height 和 vertical-align - 知乎


https://www.cnblogs.com/GeekerJun/p/14454243.html

qing_小诺
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决line-height=height元素高度但是文字并没有垂直居中的问题
南漂一枚
05-16 415
先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种不是真正的居中就越发的明显，这里可以参看下什么是基线?版权声明：本文为CSDN博主「金龙宝宝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。下图中的绿色线就是基线：line-height，指的是两行文字【基线】之间的距离。结合行高、对齐的关系并结合伪元素。
CSS line-height行高上下居中垂直居中样式属性
12-08
常常使用line-height设置内容（图片、文字）行高上下居中样式效果。 一、line-height行高语法 复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%} line-height:+数字+单位（在CSS布局中我们一般采用像素px为单位）行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。 二、行高应用介绍  Line-height行高属性，运用到对文字排版，实现上下排
html文本居中为什么没效果,详解HTML中字体使用line-height依然不能垂直居中解决办法...
weixin_32724679的博客
06-04 2391
以图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下：#next-button{height: 54px;text-align: center;color: #fff;background: #e2231a;line-height: 54px;font:16px "Microsoft YaHei","Hiragino Sans GB";cursor: po...
height = line-height 不居中（偏上、偏下）的问题
Shimeng_1989的博客
11-02 3460
情景：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, ...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
line-height等于height为什么不居中
qq_42931285的博客
01-26 1578
注意：height一定是内容盒的高度，即在box-sizing:content-box的情况下，若为border-box时，此时的height为整个盒子的高度，需要减去padding,border、margin的尺寸才为真实的内容盒的height。 如一个盒子box-sizing:border-box,border：10px,height:40px，这时内容盒的高度应该为420px,line-height设置为20px就可实现上下居中。 ...
[CSS] 解决line-height=height时纵向不居中
白瑕 的博客
05-01 1631
解决line-height纵向不居中的三个办法.
解决安卓line-height偏上
makerbeen的博客
05-30 3645
前段时间遇到问题line-height设置了居中但是却没有出现理想的情况,在安卓中整体的内容偏上,那么只好各种渠道去解决最后有了自己的答案总结一下 首先说一下谷歌浏览器的font-size值的最小值为12px,如果小于12px的时候那么它还是按照12px来显示 那么在安卓也是按照12px来显示,并且当你的块为12px以下的时候才会产生line-height值作用不理想的问题 具体为什么小于1...
h5在Android里文字位置偏下,【CSS】如何解决安卓上按钮文字偏上的问题
weixin_42361611的博客
05-27 1596
比如一个普通的按钮，要做到文字垂直居中按钮css设置为：a {height: 30px;line-height: 30px;font-size: 14px;text-align: center;width: 70px;vertical-align: middle;}在chrome上和ios上没有问题，但是在安卓上文字就会明显偏上，如图试过用table-cell或者line-height设为1,然后...
解决 Android 系统 设置line-height和height相同，文字却偏上显示（pc端和ios都显示ok）
凌风的博客
10-24 4509
问题： 代码： width: 36px; height: 20px; line-height: 20px; position: absolute; top: 14px; right: 14px; color: #fff; background: #F87D28; border-radius: 2px; font-si...
关于line-height
cristina_song的博客
11-13 352
一般默认的字体大小为16px 使用line-height设置行高时，除去字体大小剩下的距离会在行的上边和下边平分，即：行高=字体大小+上边距+下边距（同时上边距等于下边距） 所以当设置行高为盒子大小的时候可以使文字在垂直方向居中，如果行高小于盒子大小那么文字偏上，如果行高大于盒子大小那么文字偏下 一些特殊字符，如*（偏上），+(偏下），如果想让这些特殊字符垂直居中，设置line-...
使用不带单位的line-height
12-13
有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了line-height是要有单位的。这些情况下，我们都不需要考虑line-height的继承，也不会发现任何问题。当然我们在使用line-height继承的时候，就会发现问题的所在。 例如下面的代码： CSS： 复制代码代码如下: <style> .line-height-test { width: 200px; line-height: 1.4em; font-size:
关于css中line-height(行高)设置无效的问题的解决方法
12-13
关于css中line-height(行高)设置无效的问题 我们先写下这一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; line-height: 100px;/* 设置行高，让字体居中 */ background: #333;/* 设置整个背景为黑色，便于观察字体 */ color: re
深入理解CSS行高line-height与文本垂直居中的原理
12-01
前言在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码代码如下:<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style> div { width: 300px; height: 200px; border:
移动端android上line-height不居中的问题的解决
01-05
现在越来越多的移动界面使用rem适配，遇到的坑也不尽其数，今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因： 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说...
【CSS】input输入框如何去掉点击后出现的边框
热门推荐
qing_小诺的博客
01-25 4万+
开发过程中，input在点击输入时，有下图所示的默认边框出现：   下面就来说说解决办法： 方法一：直接给input添加样式： input { outline: none; }   方法二： 控制聚焦时不出现边框，添加下面样式： input:focus{ outline: none; }  ...
【CSS】设置按钮disabled时的样式
qing_小诺的博客
03-12 3万+
还原一下写此文的场景：微信小程序中，点击button，设置disabled的值为true时，button样式就变灰了： button标签： &lt;button class='bottomBtn' bindtap="doWorkBtn" disabled="{{btnDisabled}}"&gt;btn&lt;/button&gt; button样式： .bottomBtn { w...
【CSS】同一行文字，字体大小不同，实现垂直居中
qing_小诺的博客
11-16 2万+
话不多说，先来看一下默认情况下，字体大小不同的同一行文字是如何展示的，以下实例中添加了背景颜色，用于分辨： &lt;body&gt; &lt;div class="row"&gt; &lt;span class="zongjia"&gt;总价&lt;/span&gt;&lt;span class="price"&gt;200万&lt;/span&am
【CSS】解决父元素display:flex布局下的子元素宽度无效问题
qing_小诺的博客
12-03 1万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置） flex-shrink: 0; width: 100rpx; 这样就可以啦~快去试试吧~ ...
css之line-height及图片文字垂直居中
最新发布
06-01
好的，我来回答您的问题。 首先，让我们来看一下line-height的作用。line-height是用来设置行高的属性，它可以决定一行文字的高度，也可以影响文字的垂直居中。 如果想让文本垂直居中，我们可以将line-height设置为与容器高度相等的值，例如： ```css .container { height: 200px; line-height: 200px; } ``` 这样，文字就会在容器中垂直居中了。 而对于图片和文字的垂直居中，可以使用以下方法： ```html <div class="container"> <img src="image.jpg" alt=""> <span>文本内容</span> </div> ``` ```css .container { display: flex; align-items: center; } ``` 这里我们使用了flex布局，并将align-items设置为center，这样图片和文字就可以垂直居中了。 希望这些能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值