CSS line-height 与 font-size实现垂直居中

最新推荐文章于 2023-06-04 19:44:16 发布
最新推荐文章于 2023-06-04 19:44:16 发布
阅读量987 收藏 1
点赞数
分类专栏： web前端 文章标签： web前端 CSS3 垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kangzai_1225/article/details/86175867
版权

CSS line-height 与 font-size实现垂直居中

在CSS语法里，可以同时设置line-height 与 font-size属性来实现文字的垂直居中

原理

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

比如简书页头导航的首页等文字在这里插入图片描述

line-height和font-size的概念

参考：

https://blog.csdn.net/u010250808/article/details/78347814

垂直居中其它方式

参考：

https://www.cnblogs.com/hutuzhu/p/4450850.html

kangzai_1225
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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行高属性，运用到对文字排版，实现上下排
CSSline-height和font-size具体指什么
x1037490413的博客
09-14 677
CSS行高 line-height 一.网页中的文本 文本中的每一个字符都有一个不可见的框，这些框又被放在两条不可见的横线中（垂直居中），两条横线的距离就是行高，放个图片理解下 二.行高的设置方法 1.直接设置 p{ line-height: 100px; } 2.相对值 有两种相对值：都是相对于font-size而言 百分比 p{ font-size: 100px; line-height: 150%; } line-height的值可计算 100px * 150% 倍数
CSS line-height 和 vertical-align 精解（上篇）
老任物联网杂谈的专栏
12-27 1215
line-height属性的具体定义列表如下： 语法： line-height : normal | | | | inherit 说明： 设置元素中行的高度。 值： normal：默认行高，一般为1到1.2； 实数：实数值，缩放因子； 长度：合法的长度值，可为负数； 百分比：百分比取值基于元素的字体尺寸。 初始值： normal 继承性： 继承 适用于： 所有元素 媒体：
CSS 之 line-height 实现单行文字垂直居中的原理
平平无奇小码农的博客
03-04 1620
基础知识 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。我们暂且称之为顶部距离和底部距离，就是上图中的蓝色区域。 也就是说： line-height = 顶部距离 + 内容高度（顶线和底线之间的距离） + 底部距离； 顶部距离 = 底部距离； 示例一： 当line-height 等于 height 时，文字垂直居中 文本默认大小16px。 结果：文字垂直居中。 顶部距离 = 底部距离 = (line-heig
关于font-size对垂直居中影响的问题
weixin_33991727的博客
10-15 434
背景：三个inline-block元素，其中两个内容为空，另外一个包含文字，设置文字的font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。 原因： 当设置了font-size之后，改变了元素排列的基线。 垂直方向的默认基线是是baseline。当文字设置font-size之后，会将inline-block元素的默认基线设置为文字的base-line...
设置font标签居中显示
Rockandrollman的博客
10-20 9251
问题 对font标签设置了text-align:center，但是“我要居中”并没有居中。属性中的设置字体颜色为红色可以正常使用，text-align:center没有生效。 <font style="color:red;text-align:center">我要居中</font> 解决办法 可以把font标签换成h标签，这样”我要居中“就居中显示了。 <h1 style="color:red;text-align:center">我要居中</h1> .
字体垂直居中的几种实现方法
热门推荐
maomaolaoshi的博客
09-13 4万+
这几天遇到了好多关于字体垂直居中的问题，整理一下，希望对大家也有帮助。vertical-align：middle vertical-align 用来指定行内元素（inline）和行内块级元素（inline-block）或表格单元格（table-cell）元素的垂直对齐方式。 inline和inline-block对于行内元素和行内块级元素，vertical-align对middle的处理方式都是
个人笔记 css篇 font属性文本属性背景属性及盒子居中文字居中
qq_44959935的博客
01-26 754
font属性 文字大小 font-size 文字加粗 font-weight 加粗：bold 700 正常：normal 400 文字倾斜 font-style 倾斜：italic 正常：normal 字体系列 font-family 书写顺序： font-size font-...
深入理解CSS行高line-height与文本垂直居中的原理
12-01
前言在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码代码如下:<!DOCTYPE ...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
关于css中line-height(行高)设置无效的问题 我们先写下这一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style ...
html font 字体居中,【css】移动端开发中，字体/字体图标垂直居中问题
weixin_29649047的博客
06-29 1292
前情提要使用插件，自动将px转rem，所以开发中都是使用px；在移动端网页开发过程中，写了一个类似tag(定高)的东西，但在一些设备上字体和字体图标没有垂直居中。尝试了以下几种方法：设置字体line-height为tag高度，问题：在一些设备上，由于字体的font-size最小为12px，而line-height并没有最小的限制。×给字体加行高，给tag加padding的方式。 ×设置tag的高度...
单行文本垂直居中和多行文本垂直居中以及font字体
m0_71814235的博客
07-07 891
单行文本垂直居中和多行文本垂直居中以及font字体
CSS行高（line-height）使文本垂直居中详解
qq_56563934的博客
03-03 3276
line-height
常用的line-height使内容垂直居中，你真的懂它的原理吗？
最新发布
piglite的专栏
06-04 5127
如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的，所以代换一下，行高就等于它本身的上间距+下间距+文本高度。本例子中，我们设置div的高度为200px，然后里面有一行文本，我们设置了行高为200px，设置完200px后，文字本身16px不会改变，变的是它的上间距和下间距。可以发现和上面的例子代码位移不一样的地方是文本变多了一些，先来看一下此时的效果。
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
CSS垂直居中的6种方法
Harley567
02-13 4102
CSS垂直居中的6种方法
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 706
<!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使内容垂直居中，你真的懂它的原理吗？
丑小鸭变黑天鹅的博客
03-20 7254
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？一、line-height是什么二、分析其原理三、扩展一下 一、line-height是什么 line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。 二、分析其原理 首先来看个图 如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二
html让font居中,用CSS做将如何字体居中？
weixin_36035750的博客
06-23 3164
使用CSS将字体居中可以使用HTML中的<center>标签，简单方便。具体介绍CSS中Center标签定义、其使用方法及相关内容：对浏览器支持：所有浏览器都支持<center>标签。定义和用法：对其所包括的文本进行水平居中。标准属性：id,class,title,style,dir,lang,xml:lang。事件属性：onclick,ondblclick,onmouse...
css之line-height及图片文字垂直居中
06-01
如果想让文本垂直居中，我们可以将line-height设置为与容器高度相等的值，例如： ```css .container { height: 200px; line-height: 200px; } ``` 这样，文字就会在容器中垂直居中了。 而对于图片和文字的垂直...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值