为什么不需要display-table就可以直接居中了?

为什么不需要display-table就可以直接居中了?

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


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

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

3回答
chat_c 2019-04-26 11:43:28
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        .qq{
         background-image: url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
         background-color: red;
            width: 498px;
            height: 498px;
            display: table;/*此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。*/
        }
        .ww{
         vertical-align: middle;/*设置元素内容垂直居中,多行内容居中方式*/
      display: table-cell;/*属性指让标签元素以表格单元格的形式呈现,类似于td标签。*/
      text-align: center;/*元素类内容水平对其方式,居中对其*/
        }
     /*此处写代码*/
    </style>
</head>
<body>
<div class="qq">
     <div class="ww">
         《长歌行》
         <br>
         <br>青青园中葵,朝露待日晞。
         <br>阳春布德泽,万物生光辉。
         <br>常恐秋节至,焜黄华叶衰。
         <br>百川东到海,何时复西归。
         <br>少壮不努力,老大徒伤悲。
         <br>
     </div>
    </div>
</body>
</html>

你这个是以网页整体为父类元素,所以不用转换为表格

  • 同学你好!你的理解是正确的,点赞~ 祝学习愉快~
    2019-04-26 12:57:21
好帮手慕码 2019-04-24 15:27:40

同学你好!

这里可以不设置父层 display:table也可以实现垂直居中的。

vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。因此只需要子级设置了display:table-cell;vertical-align:middle;也可以实现垂直居中了。

如果帮助到了你 欢迎采纳 祝学习愉快~

好帮手慕码 2019-04-24 15:11:45

同学你好!

同学问的是垂直居中吗?

在这里设置了text-align:center;是做水平居中的。

设置display:table-cell;vertical-align:middle;是做垂直居中的。

如果只vertical-align:middle;是实现不了垂直居中的,如图:

http://img1.sycdn.imooc.com//climg/5cc00c0c0001c3db03190209.jpg

http://img1.sycdn.imooc.com//climg/5cc00c030001603004630208.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~


  • 提问者 qq_happy #1
    父层 display:table ; 子div:display:table-cell ;vertical-align:middle; 这样才可以垂直居中么? 这里不需要display:table 就可以显示垂直居中了
    2019-04-24 15:16:39
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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