margin:0 auto,可以水平居中,加了display:table-cell后居中失效了?

margin:0 auto,可以水平居中,加了display:table-cell后居中失效了?

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


正在回答

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

1回答

设置display: table-cell;后元素为单元格 ,成为行内元素 . margin: 0 auto;适用于块级元素哦  .希望解答了你的疑惑 , 祝学习愉快 !

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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