使用css属性line-height实现文字垂直居中的问题

最新推荐文章于 2024-02-01 17:15:51 发布
最新推荐文章于 2024-02-01 17:15:51 发布
阅读量928 收藏
点赞数 1
分类专栏： line-height实现文字垂直 文章标签： line-height实现文字垂直
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vx18183617776/article/details/88370310
版权

1、使用css属性line-height实现文字垂直居中
　　 方法比较简单，但是只能实现单行文字的垂直居中。
　　
单行垂直居中效果如下：
在这里插入图片描述
　 要是p标签内的文字是多行呢，要实现多行垂直居中，还这样设置的话就会出现下一行文字跑出div盒子。每行文字行高跟div盒子高度一样，当文字是多行时，第二行及后面行不跑到盒子外面才怪！

现象如下：
　　 在这里插入图片描述

vx18183617776
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css属性line-height的应用——单行文字上下居中
以休伯利安的名义
02-03 594
目录line-height属性的可用属性值1.line-height: normal2.line-height: number3.line-height: length4.line-height: x%5.line-height: inherit应用场景单行文字上下居中写在最后 line-height属性是很常用的css属性，可以用它来设置文字的行高，但是不允许使用负值。 line-height属性的可用属性值 1.line-height: normal 默认值。文字会默认有一个合理的行间距。 2.line
css实现多行文字垂直居中
charlie________的博客
11-29 478
flex方法 <div class="father"> <div class="children"> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span> <span>多行文字垂直居中</span>
CSS中文字如何垂直居中，为什么line-height:你需要垂直居中的盒子的像素大小就能实现文字垂直居中。
最新发布
我就知道你会来，我们一起进步吧！
02-01 480
答：因为行高由上空隙、文字本身的高度、下空隙三部分组成。文字本身的高度由font-size或者浏览器默认决定。上空隙和下空隙一样大，本质上：CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。实现：让文字的行高等于盒子的高度，就可以让文字垂直居中了。line-height:你需要垂直居中的盒子的像素大小；，甚至有可能偏上超出盒子。，就相当于文字垂直居中了。，甚至有可能偏下超出盒子。
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？
丑小鸭变黑天鹅的博客
03-20 7620
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？一、line-height是什么二、分析其原理三、扩展一下 一、line-height是什么 line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。 二、分析其原理 首先来看个图 如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二
HTML中字体使用line-height依然不能垂直居中解决办法
jisuanji_qiyongjie的博客
08-23 5988
以图片所示的效果为例，显然我们不仅要使“下一步”文本水平居中，还要垂直居中，此时我们写代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #next-butt
解决line-height=height元素高度但是文字并没有垂直居中的问题
热门推荐
金龙宝宝的博客
10-24 1万+
先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种不是真正的居中就越发的明显，这里可以参看下什么是基线? 下图中的绿色线就是基线：line-height，指的是两行文字【基线】之间的距离 解决方案一、 结合行高、对齐的关系并结合伪元素 ...
CSS 设置了line-height等于行高之后文字未垂直居中
weixin_44879122的博客
04-04 1560
<style> .box { /* box-sizing 属性是防止盒子由于边框和内边距被撑大 */ box-sizing: border-box; width: 100px; height: 100px; background-color: pink; border: 10px solid skyblue; ...
CSS line-height行高上下居中垂直居中样式属性
12-08
在网页设计中，`line-height` 是一个非常重要的CSS样式属性，用于控制元素内部文本行之间的垂直间距，它可以帮助实现文字和图片的上下居中，以及单行或多行文本的垂直布局。`line-height` 的值可以是绝对长度单位...
深入理解CSS行高line-height与文本垂直居中的原理
12-01
在CSS布局中，`line-height`属性扮演着至关重要的角色，尤其在实现文本垂直居中时。`line-height`定义了元素内部行之间的空间，它不仅影响文本的可读性，还能用来创建各种布局效果。以下是对`line-height`属性及其在...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
首先，`line-height`属性的目的是为了控制元素内部行与行之间的距离，它可以帮助我们实现文本的垂直居中或其他布局需求。例如，在给定的代码段中，`.head`类的元素有一个100px的高度，开发者尝试通过设置`line-...
CSS行高——line-height
weixin_34216196的博客
08-04 1090
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。 所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识： 顶线、中线、基线、底线 &lt;!DOCTYPE html&gt; &lt;html&gt;...
CSS 使用line-height实现单行文字垂直居中的原理 图解
妖怪的博客
03-06 2059
首先，line-height为行高。height为高度。单行文本垂直居中写起来很简单，但是如果要深入理解其原理还是得花些时间的。 有一个公式必须知道 line-height=上距离+内容高度+下距离。 当 line-hieght 等于 height，内容垂直居中 当 line-hieght 大于 height，内容向下移动 当 line-hieght 小于 height，内容向上移动 下面举个...
css行高（line-height）及文本垂直居中原理
yangyuqingabc的博客
11-17 1万+
css行高（line-height）及文本垂直居中原理 一、行高的定义 标准定义：两行文字基线之间的距离。 那么什么是基线？ 基线是在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线。在 CSS 中，每一行文字也可以看成一个“行盒子”，而每一个行盒子都有4 条线：顶线、 中线、基线和底线。关于行盒子的具体内容，看下图： 如图，每一行文字，可看成由上间距、文本内容、下间距构...
line-height和vertical-align实现多行文字水平垂直居中效果
逍遥的前端笔记
07-28 5708
这篇文章源于同事问了我两个问题: (1)为什么height和line-height设置相同的值能够使得单行文字垂直居中? (2)如何实现多行文字水平垂直居中效果? 经过学习,大致形成了自己的思路,也顺利解决了同事的疑惑,觉得有必要写篇文章记录,一来是给自己做备忘,二来是给恰好有此疑惑的同行一个解决问题的思路,鉴于本人水平有限,文中不当之处欢迎批评指教. (一)从文字和图片的...
垂直居中 - 使用 line-height
Serena_tz的博客
02-25 672
单行文本我们设置垂直居中，可以使用line-height的高度和height的高度一致。 实例： .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* 如果文本有多行，添加以下代码: */ .center p { line-height: 1.5; display: inline-block; vertical-a
使用flex布局和line-height实现字体的水平居中显示
qq_32202099的博客
01-07 1347
在前端开发中除了实现div居中之外，还经常需要让字体水平垂直居中，div实现水平垂直居中可以参考使用flex布局和translate实现div水平和垂直居中，文字的水平和垂直居中代码实现如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .contain1{ wi
CSS行高（line-height）及文本垂直居中原理1
weixin_30849591的博客
04-02 219
如果父级的height=200px ， 行高等于200px；会垂直居中显示， 原理：默认字体大小为16px； 行高=字体大小+上间距+下间距，上间距=下间距=（200-16）/2=92px；就会自动填满父级的height，显示效果就像垂直居中。 如果用百分比设置line-height：是已 字体大小 为基础。 例如：字体16px；line-height=400%=16*4=64px； ...
CSS line-height 与 font-size实现垂直居中
kangzai_1225的博客
01-09 992
CSS line-height 与 font-size实现垂直居中 在CSS语法里，可以同时设置line-height 与 font-size属性来实现文字的垂直居中 原理 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。 比如简书页头导航的首页等文字 line-height和font-size的概念 参考：...
CSS行高（line-height）及文本垂直居中原理
junxinwoxin的博客
06-11 912
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style>
css之line-height及图片文字垂直居中
06-01
line-height是用来设置行高的属性，它可以决定一行文字的高度，也可以影响文字的垂直居中。 如果想让文本垂直居中，我们可以将line-height设置为与容器高度相等的值，例如： ```css .container { height: 200px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值