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

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

30

31

32

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

qq_鸭绿桥第一帅哥_0 2018-11-03

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

0

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2018-11-05 15:31:35

这是因为vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的，例如：

vertical-align一般情况下不会使用百分比和length，这两个值作为了解即可哦

祝学习愉快！

樱桃小胖子 2018-11-04 12:02:41

你的效果是实现了的，建议添加background-size: cover;使背景图片等比缩放。并且将宽度和高度设置成一样的，祝学习愉快！

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

谢谢老师，还有一个问题，这里的vertical-align: middle;换成vertical-align: 15%;或者换成vertical-align: 15px;。为什么无法起作用呢？

2018-11-05 14:34:07

相似问题

LOGO不知道怎么垂直居中

老师，为什么我的这个logo图片显示的不是垂直居中的效果啊

请问img为什么没有垂直居中？要它垂直居中应怎样实现？

logo的图片如何垂直居中？

为什么垂直居中效果不能实现？

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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