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>

是否可以坚持走得更远些 2018-07-16

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

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-07-16 17:04:09

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

收起回答

是否可以坚持走得更远些提问者 #1

老师，单元格td不应该是块级元素么？是我记错了么？

2018-07-16 17:14:23
好帮手慕夭夭回复提问者是否可以坚持走得更远些 #2

单元格可以一行多个显示 ,所以可以理解为行内的块元素 ,可以设置宽高 ,但是如题中设置margin:0 auto不起作用哦

2018-07-16 17:46:18