老师，关于vertical-align填写数值为什么会变成行高样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
     /*此处写代码*/ 
     .one{background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
        width:600px;height:600px;
        text-align:center;}
    span{vertical-align:50px;}
     
        
    </style>
</head>
<body>
    <div class="one">
        <span>《长歌行》
        <br>
        <br>青青园中葵，朝露待日晞。
        <br>阳春布德泽，万物生光辉。
        <br>常恐秋节至，焜黄华叶衰。
        <br>百川东到海，何时复西归。
        <br>少壮不努力，老大徒伤悲。
        <br>
        </span>
    </div>
</body>
</html>

阿满满满 2019-04-14

源自：CSS背景和列表 2-6 编程练习

0

收起

2回答

提问者阿满满满 2019-04-15 14:40:08

我在使用vertical-align对span标签设置垂直方式时，填写的数值，发现文本并不是整体下移，而是变成了行间距，每段文本之间出现了相应数值的间距。并且填写middle，top，bottom等值都无效，这是为什么，是参照物出了问题吗

樱桃小胖子 #1

根据br 标记本身的属性，html中<br/>元素是内联元素。因此会继承span设置的vertical-align:50px;这里同学只需要记住，vertical-align常用于图片垂直居中，以及图片与文字垂直方向的对齐即可

2019-04-15 15:31:27

樱桃小胖子 2019-04-14 18:38:14

因为vertical-align 属性是设置元素的垂直对齐方式，line-height也是文本设置垂直居中的，因此对于文本内容，两者都是设置垂直对齐的，因此有异曲同工之处。

希望可以帮到你！

相似问题

为什么我的诗歌是否实现垂直居中？怎么感觉与作业图片不符

老师这个练习正确吗？vertical-align: middle;为什么不是居中呢？

4-1老师就视频中的display案例提出几个问题？

为何location-bar 内的行内块元素不用vertical-align会偏移？

老师，为什么调用函数写在上面会出BUG，写在下面却没有问题

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号