老师,请检查

老师,请检查

<!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>

感谢老师批改。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

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;属性哦。例:

http://img1.sycdn.imooc.com//climg/5d23272c0001903605290490.jpg

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

祝学习愉快!

  • 提问者 李小圆_ #1
    谢谢老师的批改。有个问题,因为在div里设了行高,这里的span1我就没有设置vertical-align。但是不设置span1的vertical-align的话,span2和img的vertical-align设置也没效果,请问这是为什么啊
    2019-07-09 14:11:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师