2-5里一些关于display:table的问题

2-5里一些关于display:table的问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>背景</title>

    <style>

     div{height:600px;

         width:600px;

         background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);

         text-align:center;

         display: table;

     }

    span{

         vertical-align:middle;

          display: table-cell;

         }

    </style>

</head>

<body>

    <div>

        <span>

        《长歌行》

        <br>

        <br>青青园中葵,朝露待日晞。

        <br>阳春布德泽,万物生光辉。

        <br>常恐秋节至,焜黄华叶衰。

        <br>百川东到海,何时复西归。

        <br>少壮不努力,老大徒伤悲。

        <br>

        </span>

    </div>

</body>

</html>

为什么只设置 vertical-align:middle无法居中,还是得添加display:table标签

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

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

2回答
一路电光带火花 2018-01-22 10:05:03

display:table-cell;此元素会作为一个表格单元格显示(类似 <td> 和 <th>);display:table-cell 加上 vertical-align:middle 使高度不同的元素都垂直居中。


慕桂英9335871 2018-01-21 20:57:39

因为vertical-align对于块级元素不生效,所以需要用display:table-cell,dispaly:table是可以不添加的

  • 提问者 zhanghp #1
    但我写在span标签里了
    2018-01-21 22:32:02
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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