CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理

于 2021-11-06 17:43:28 发布
阅读量1.1k 收藏 3
点赞数 3
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52726240/article/details/121182502
版权

CSS 垂直居中 行高 布局 前端开发
关键词由CSDN通过智能技术生成

CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理：用pink老师的一张ppt就成让人一下子明白过来。
在这里插入图片描述

CSS 设置了line-height等于行高之后文字未垂直居中
weixin_44879122的博客
04-04 1660
<style> .box { /* box-sizing 属性是防止盒子由于边框和内边距被撑大 */ box-sizing: border-box; width: 100px; height: 100px; background-color: pink; border: 10px solid skyblue; ...
文本或者图片在盒子中垂直居中
csdn_491407692的博客
03-25 1986
针对html中文字或者图片在div中的垂直居中的解决方法
行高等于容器高度可以垂直居中
不因俊俏难为友，正为风流始读书
07-27 1889
行高： 应用：如果行高等于容器行高那么元素在父容器中垂直居中 问题：为什么行高等于容器的高度，元素在父容器中垂直居中？ 行高的定义：两行文本之间基线的距离叫行高 div{ display: inline-block; text-align: center;/*水平居中*/ background-color: plum; widows: 100px;
css行高和盒子高区别
407指导员
11-07 2165
行高 什么是行高 在css中所有的行都有自己的行高。 .box1 { border: 1px solid black; width: 200px; } <div class="box1">我是文字</div> 被撑起来的高度就是行高 line-height属性 line-height: 60px; 80px就是行高 注意点： 1.行高和盒子的高度不是一个概念。盒子高度是整个标签的高度,如果设置了，就不会跟着行高变化，如果没有设置就会被撑大，两个行高80p
CSS基础-行高（height和line-height)【学习笔记】
lilien的博客
11-21 492
1 行高测量 行高的测量方法： 2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。 行高 = 上距离 + 内容高度 + 下距离 上距离和下距离总是相等的，因此文字看上去是垂直居中的。 行高和高度的三种关系 如果 行高 等 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 ...
行高与盒子模型
yibashou的博客
02-11 339
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;行高与盒子模型&lt;/tit
通过设置文本的行高与外部容器的高度一致，可以使文本垂直居中
ztt0918的博客
04-14 690
通过设置文本的行高与外部容器的高度一致，可以使文本垂直居中
通过css控制HTML文本框中的文字垂直居中
09-28
在这种情况下，可能需要使用其他CSS技术，例如弹性盒子（Flexbox）或网格布局（Grid）来实现多行文本的垂直居中。 在上述的代码示例中，为了实现文本的垂直居中，我们在`<head>`部分的`<style>`标签内定义了CSS规则...
在前端中，若盒子的高度随内容变化而变化，如何设置行高，使文字垂直居中
最新发布
10-17
在前端，如果你想让一个盒子的高度随着内容自动调整，并保持文本垂直居中，你可以采用CSS flexbox布局或者grid布局。以下是两种方法： 1. **Flexbox**: - 首先，将容器元素设置为`display: flex;` - 然后，设置`...
CSS 让盒子垂直居中的几种方式
tikaso Page
08-03 820
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
行高
The_last_knight的博客
01-19 1030
行高   在之前我们有提到这个属性line-height,该属性用来设置行高，并且我们用它来设置过行间距。为了明白行高指的是什么之间的距离，我们需要明白下面这个图   一个文本内容被四条线划分，而行高指的就是基线与基线之间的距离，当不设置行高时，行高的大小为字体的大小，所以行与行之间是紧贴着的。   在导航栏练习中，为了使文字能够垂直居中对齐，我们让line-height的大小等于盒子的大...
css:高度等于行高 和 行高的区别
qq_36413371的博客
11-13 1933
多行文本设置高度等于行高会影响后面的布局 所以单行文本写高度等于行高 多行文本直接写行高
关于CSS中的line-height等于容器高为什么会居中
茂木残花任风萧
01-06 1774
大家都用过line-height，可以实现垂直文本居中： //html &lt;p&gt; 这是文字 &lt;/p&gt; //css p{ height: 40px; line-height: 40px; border: 1px solid red; font-size: 20px; } 当然还可加入text-align：center让它水平居中 一、line-heig...
一行文字的时候，文字在整个盒子中垂直水平居中，超过一行之后，文字在盒子中垂直水平居中，文字左对齐...
ask04800的博客
04-11 577
在现实工作中，很多时候会有一些比较奇怪的需求，但即使是奇怪，但还是需要去实现。最近，在工作中，遇到一个需求，是这样的： 　　1、标题只有一行文字的时候，整个标题在一个div中需要垂直水平居中，文字也是居中对齐 2、当标题超过一行的时候，那么标题在这个div中需要垂直水平居中，但是文字变成了左对齐 根据如上描述，其实所用到的知识点也就那么几个: 1、未...
【温故知新】CSS学习笔记（行高简介）
少年休闲海
04-18 763
行高简介 【行高的测量】 真正的行高有如下图所示的四条线组成（顶线、中线、基线、底线）。 顶线：以文字的最高点为准； 中线：以文字的最高点和最低点中间取一条线为中线； 基线：以文字中最短的底线为基准； 底线：以文字的最低点为准； 那么我们所说的行高其实就是基线到基线的距离。区分上面的底线与顶线之间的距离（行距）。 【行高的运用】 我们利用行高最多的一个地方就是...
前端学习笔记-CSS-行高
qq_36434637的博客
07-24 890
行高的测量 行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。 做法就是： 文字的行高等于盒子的高度。 上距离和下距离总是相等的，因此文字看上去是垂直居中的。 如果 行高 等 height 高度 文字会 垂直居中 如果行高 大于 高度 文字会 偏下 如果行高小于高度 文字会 偏上 练习： <!DOCTYPE html> &l...
弹性盒子的行高设置文字垂直居中
ckxkobe的博客
11-29 2769
弹性盒子的行高设置文字垂直居中 行高设置居中对齐，是针对内容宽度 在CSS3的border-sizing模式下，是内减模式 所以要减去padding和border 要小心 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document
行高=高度，让字体垂直居中的原理
天天的博客
10-18 1437
原理很简单， 就是 文字的高度+ 上下高度= 高度 height 上高度= 下高度 若行高> 高度，那么自然 上下的高度要高些，然后文字就往下走 若行高<高度，那么 上下的高度就小写，文字，自然往上走 若一样，则上下高度也一样，正好居中显示 ...
line-height为什么会使文字居中
zmhxuexi的博客
06-18 909
首先行高是文字的字符大小和字符上下的边距决定的，关键就是这个上下的边距是相等的，你可以把行高想象是两条看不见的水平平行线，而在平行线内，字符与平行线上下的边距总是相等的，就是垂直居中的意思。 而height这个属性是盒子属性的高度，盒子并没有像行高这样与上下的边距是相等的要求。而是默认在左上角 所以不是行高line-height与文字高height一样就能让文字居中，而是应该这样理解，字符本来就在行高内垂直居中了，只是行高与文字的盒子高度不等，导致不能在盒子里垂直居中，如果我们把行高line-height与
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值