求问一个小知识点

Question

  <div>
    <div style="height:0; padding-bottom:10%; background:red; font-size: 200%;">demo</div>
  </div>

• 老师这种height为0，padding撑开的元素怎样设置文字垂直居中呀，还有这种写法的font-size如果用百分比，相对谁呀？不好意思老师麻烦您了

Answer 1

双越 2020-05-07 17:07:57

首先，我很不理解你为何要这么做。是有啥特殊的需求，必须要这么写吗？正常写 height 和 font-size 不可以吗？

• 提问者 Brannua #1

  恩。。学习过程中的一点好奇，又没研究明白，能麻烦您指点吗老师，谢谢您

• 双越 回复 提问者 Brannua #2

  这种奇怪的东西，我也搞不懂。如果是我的话，我会用传统的 css 方式去实现，简单而且没有坑，还能最大程度保证兼容性问题。

• 提问者 Brannua 回复 双越 #3

  嗯嗯，谢谢您老师，老师辛苦啦～

Answer 2

疆南星耀 2020-05-18 10:03:15

1，设置padding-top；2，基于html的font-size

• 提问者 Brannua #1

  谢谢小伙伴～但是设置padding会撑大元素哦

• 疆南星耀 回复 提问者 Brannua #2

  好哒，又没说不能撑开，top和bottom各给一半呗

• o杨飞o 回复 提问者 Brannua #3

  box-size: boder-box; IE模型和标准模型。

点开查看后面1条评论

Answer 3

KTV恶霸 2021-11-12 22:21:49

试试把padding-top设置为padding-bottom同样值，line-height设置为0 

<div style="height:0; padding-bottom:5%; padding-top:5%; line-height:0; background:red; font-size: 200%;">demo</div>

Answer 4

邓男子 2021-06-05 01:48:15

height为0，设置padding不就自动垂直居中了吗？哦 ,可能是line_height导致的，加一个line-height:0