老师，请检查

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css叠层图</title>
<style>
div{
line-height: 5em;
font-size: 2em;
font-family: '宋体';
text-align: center;
background-color: #eee;
}
img{
vertical-align: -5px;
}
.span1{
font-size: 2em;
}
.span2{
color: red;
text-decoration: underline;
vertical-align: 15px;
}
</style>
</head>
<body>
<div>
<p><img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"/>&nbsp;<span class="span1">CSS层叠样式表</span>&nbsp;<span class="span2">(Cascading Style Sheets)</span></p>
</div>
</body>
</html>

感谢老师批改。

李小圆_ 2019-07-08

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

收起

3回答

好帮手慕糖 2019-07-09 18:45:56

你好，因为中间这个文字没有设置，所有左右的会受中间这个文字的基线的影响，会对比中间这个文字的基线对齐哦。因为这里是在同一个容器中的（即：同一个父级），这是一个特性，同学可以记一下这个效果哦。

祝学习愉快！

收起回答

好帮手慕糖 2019-07-09 16:01:55

同学你好，给父级设置行高之后，也要个子元素设置vertical-align，要结合使用哦。

另，这里不是没效果，是相互影响了哦。可以去掉下，其他两个的这个属性，会发现还是有变化的哦。

希望能帮助到你，祝学习愉快！

收起回答

提问者李小圆_ #1

不是很懂啊，设置行高其实就已经可以垂直居中了啊，为什么还需要配合vertical-align。我知道这里不是没效果，是说没有达到想要的效果的意思，就是设置middle也不能居中，是怎么相互影响的请问，对准这一行的middle线不就可以了吗为什么会被旁边的其他元素影响。谢谢老师解答。

2019-07-09 16:15:36

好帮手慕糖 2019-07-08 19:22:48

同学你好，垂直居中这里，嗨哟点误差，建议：可以分别添加vertical-align: middle;属性哦。例：

希望能帮助到你，欢迎采纳。

祝学习愉快！

收起回答

提问者李小圆_ #1

谢谢老师的批改。有个问题，因为在div里设了行高，这里的span1我就没有设置vertical-align。但是不设置span1的vertical-align的话，span2和img的vertical-align设置也没效果，请问这是为什么啊

2019-07-09 14:11:50