css_行高line-height失效

已于 2023-04-11 17:27:31 修改
阅读量523 收藏
点赞数 1
分类专栏： css-study Bugs 文章标签： css 前端
于 2023-04-11 17:26:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_57226103/article/details/130088910
版权
博客指出设置line-height与容器高度相等时，行内元素垂直不居中的情况。还提到line-height应写在font下面，或不用font复合属性，而用font-size等单独设置字体属性。

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

问题:
设置line-height与容器高度相等，行内原素垂直不居中
解决:
line-height要写在font下面，或者不用font复合属性，用font-size、font-style、font-weight、font-family单独设置字体属性

span/p水平垂直居中 --＞ line-height失效问题
相扑小猫的博客
05-04 1306
HTML： <div class="test"> <span class="test2"> Hi! Click me </span> </div> CSS: .test{ height: 50px; width:500px; border:1px solid; } .test2{ height: 50px; width:500px; display: inline-block; text-align: cente
关于css中line-height(行高)设置无效的问题的解决方法
09-22
主要介绍了关于css中line-height(行高)设置无效的问题的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css line height无效,关于css中line-height(行高)设置无效的问题的解决方法
weixin_39972996的博客
08-03 2420
关于css中line-height(行高)设置无效的问题我们先写下这一串代码：Document.head{height: 100px;text-align: center;line-height: 100px;/* 设置行高，让字体居中 */background: #333;/* 设置整个背景为黑色，便于观察字体 */color: red;font:700 18px simsun;/* 对字体进行...
CSS line-height 失效
zbailing的博客
07-04 1944
正常样式 line-height失效样式 带有文字的按钮样式不受影响，但只有图标的按钮line-height已失效 line-height失效原因 文本写在了html标签外后，line-height失效了 ...
一次关于line-height 属性失效的问题排查
星宇大前端
05-22 1518
今天同事说了一个问题，一个web 工程里突然样式竖直方向不居中了全部失效，我帮忙看了下。结果看了一个小时也没有解决，最后猜出来的，反向推出原因，记录一下。
解决IE6下，给图片加上line-height属性不起作用的解决方法
01-21
在css设置中，我们一般用行高line-height来设定某一行的高度，这在ie7与firefox等浏览器都适用。但当行中有其他元素时（如图片，SPAN,li..）在IE6.0下line-height会不起效果，后来查了下资料，果然如此，资料如下： ...
为什么line-height不起作用
z007pig的博客
11-18 5435
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
css设置line-height无效,为什么设置span的line-height属性无效？
i_am_a_div的博客
09-27 1562
css设置line-height无效,为什么设置span的line-height属性无效？
关于css中line-height(行高)设置无效的问题
热门推荐
Kobe_G的博客
09-21 2万+
关于css中line-height(行高)设置无效的问题 我们先写下这一串代码： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp
设置line-height无效的解决办法
qq_37471721的博客
06-20 9111
今天在做项目的时候遇到一个很奇怪的问题，明明设置了line-height,可是文字并没有垂直居中，大概如下： 效果如下 显然line-height没有生效，后来发现font组合属性不能写到line-height后面，如果写到line-height后面的话要把属性分开写，font-weight:bold,font-size:16px,font-family:‘微软雅黑’,这样写也是可以的。更改...
给盒子设置定位后line-height无效
FUFCY的博客
02-17 388
给盒子定位后想要里面盒子竖值居中盒子css样式里display: flex;和justify-content: center;就可以了
line-height失效或者被过滤器过滤的问题
你若成风，我则化雨
04-11 861
line-height 是设置行间距离（行高） 的一种方法该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。 原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计...
css line height无效,为什么设置span的line-height属性无效？
weixin_39860636的博客
08-03 1506
不知道为什么span 中line-height设置大小小于18px的话都是无效的18之后才看到效果，不知道是怎么回事求大佬解答一下http://codepen.io/1206189299/…直接给答案：给span设置display:inline-block;。原理请参看这篇文章，解释了 什么是 Block box、Line box。但是里面没有讲清楚为什么不能小于18px。这里有个解释 Heigh...
line-height失效解决办法
小白博客
07-22 1万+
对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身img,input,select,object高度)/2px 0; vertical-align:middle-------垂直居中同时该属性指挥对inline-block元素起作用哟    ...
css line height无效,IE9中CSS line-height的文字垂直居中无效
weixin_36480977的博客
08-03 724
在ie9中有不少朋友会发现CSS中的line-height控制的文字垂直居中无效问题，下面小编来给各位朋友详细介绍此问题的具体解决方法。在IE9常常会遇到写的DIV CSS网页，文字有时不能垂直居中使用line-height根本无效，即使可以设置IE浏览器的兼容模式，但对于访客而言不可能每个人都会去设置兼容模式浏览，只能算是掩耳盗铃的解决办法，怎么办呢？只好搜索了，百度了一下才找到原因，原来IE9...
html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...
weixin_39759270的博客
06-10 570
今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关关于css中line-height(行高)设置无效的问题的解决方法 的相关资料，希望小伙伴们看了有所帮助。关于css中line-height(行高)设置无效的问题我们先写下这一串代码：Document.head{height: 100px;text-...
css中line-heigth失效
weixin_30436891的博客
03-01 298
css中，写了这样的两行： line-height: 200px; font: 20px Arial; 结果line-height失效了。 原因是font中包含了line-height的赋值(默认值normal)，导致前面的200px被层叠覆盖了。 font连写时，line-height写在font-size的后面==> font-size/line-height 转载于:htt...
line-height： 属性中文失效解决方案
wstwlk的专栏
04-22 851
破洛洛文章简介：我们在IE9常常会遇见自己写的DIV CSS网页，文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？ 我们在IE9常常会遇见自己写的DIV CSS网页，文字有时不能垂直居中，究竟IE9 line-height设置文字不能垂直居中原因是什么？ IE9不支持line-height原因：中文ie9不支持英文字体 相信大家在IE9看见自己使用li
text-align和line-height可以将文字居中的原理
最新发布
03-30
而line-height通常是设置行高，影响行间距，但有时候也被用来垂直居中单行文本。 用户可能是在做网页设计时遇到了文字居中问题，想知道这两个属性具体是怎么工作的。可能他们试过用text-align: center让文字水平...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值