垂直居中使用百分数的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
 <title>CSS运用</title>
 <style type="text/css">
 span{
  vertical-align: 100%;
  /*vertical-align: 1em*/
  line-height: 40px;
  font-size: 20px;
 }
    
 </style>
</head>
 
 <p>
  India must not expect China to concede <span>its violation of China's territory, analysts said,</span> after a spokesman from the Ministry of National Defense issued a statement warning India to abandon illusions. 
 </p>
</body>
</html>

在上面vertical-align使用100%，和1em时，span偏移的高度不一样。使用百分数时是相对于该元素的line-height，使用em时是相对于该元素的font-size。老师，是这样吗？

宝慕林3319090 2017-08-06

源自：CSS文本样式 3-10 vertical-align

收起

2回答

好帮手慕糖 2017-08-06 18:47:53

你好，（1）你可以给父级设置下line-height，发现父级也会影响，不过这里影响的位置不同，给父级，是父级的行高变化（大或者小），从而位置文字上下移都动的幅度，变大变小。而给自身设置，自身的行高改变，位置自然也会改变。

（2）这里不是跟长度有关系，若单位使用px的话，与font-size是没有关系的。而em这个单位有点特殊，em是相对长度单位。相对于当前对象内文本的字体尺寸，所以会影响。

祝学习愉快！

收起回答

好帮手慕糖 2017-08-06 15:48:41

你好，（1）使用百分数时是相对于该元素的line-height，这个理解是对的，但是这里是父级的行高哟（即：本代码中p的行高）。

（2）而em呢，等同于使用长度（px）;不过这个与font-size是没有关系的，它只是精确的设置文字上下移动的幅度。

祝学习愉快！

收起回答

提问者宝慕林3319090 #1

不对吧，我看CSS权威指南里P148说“指定的百分数要计算为该元素line-height的百分数，而不是相对其父元素的line-height”。

2017-08-06 15:53:06
提问者宝慕林3319090 #2

第二个回答，使用1em，偏移多少呢？我做的测试 1em的偏移量就是当前元素的字体大小。

2017-08-06 15:55:02