为什么使用类选择器无法使图片垂直居中，而标签选择器却可以使图片垂直居中。

<html>
<head>
<meta charset="UTF-8">
<title>e</title>
<style type="text/css">
p{background-color: #eee;height: 5em;line-height: 5em;text-align: center;}

.one{vertical-align: middle;}

.two{font-size: 2em;vertical-align: middle;}

.three{text-decoration: underline;color: red;vertical-align: middle;}
</style>
</head>
<body>
<p><span class="one"><img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"></span><span class="two">CSS层叠样式表</span><span class="three">(Caseading Style Sheets)</span></p>
</body>
</html>

qq_鸭绿桥第一帅哥_0 2018-10-26

源自：CSS文本样式 4-3 编程练习

收起

1回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-10-26 13:47:59

vertical-align 属性设置元素的垂直对齐方式。

当设置在.one上的时候,是设置的这个span标签的垂直对齐方式

祝学习愉快!

收起回答

qq_鸭绿桥第一帅哥_0 提问者 #1

谢谢老师，这个问题我明白了。还有一个问题，之前课程教过：单行文字垂直居中只需要将line-height属性设置成高度就行，这里为什么把所有的vertical-align: middle;换成line-height: 5em却无法实现垂直居中？

2018-10-26 15:05:32
妮可妮可妮_ 回复提问者 qq_鸭绿桥第一帅哥_0 #2

因为文字和图片的对齐方式不同所以不能实现效果,并且.two的字体和其他字体大小不同它们相对于基线对齐,所以也不能实现垂直居中

2018-10-26 15:43:23
qq_鸭绿桥第一帅哥_0 提问者 #3

谢谢老师，还有一点没明白，文字和图片的对齐方式有什么不同？

2018-10-27 08:10:32