请老师看一下代码,为何还是实现不了水平居中和垂直居中

请老师看一下代码,为何还是实现不了水平居中和垂直居中

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文本样式</title>

        <style type="text/css">

           /*写出CSS样式*/

           body{

               background-color:#eee;

               font-size:2em;

               line-height:5em;

               display:table;

               

           }

           div{

               text-align:center;

               border: solid;

               display:table-cell;

               vertical-align:middle;

               

               

           }

           

           .one{

               font-size:2em;

           }

           .two{

               color:red;

               text-decoration:underline;

           }

        </style>

    </head>

    <body>

          <!--写出html代码-->

          <div>

              <img src=" http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg">

              <span class ="one">CSS层叠样式表</span>

              <span class = "two">(Cascading Style Sheets)</span>

          </div>

    </body>

</html>


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

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

3回答
好帮手慕码 2019-05-18 16:52:04

同学你好!

display和vertical-align没有继承性,

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

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

所以这里相当于只给div设置了,对里面的内容并没有影响,因此呢不能实现垂直居中

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

另关于:div设置为table cell后此元素会作为一个表格单元格显示(类似 <td> 和 <th>),不会直接垂直居中的,要配合vertical-align:middle来使用

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

提问者 慕先生9364974 2019-05-18 11:39:38
好帮手慕码 2019-05-18 11:09:39

同学你好!
需要给div中的三个内容设置vertical-align: middle;

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

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

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

  • 提问者 慕先生9364974 #1
    我是想用父元素是display:table 子元素display: table cell vertical-align: middle 为什么这样实现不了
    2019-05-18 11:37:26
  • 提问者 慕先生9364974 #2
    为什么把div 变成table cell,不能直接将其垂直居中呢?
    2019-05-18 11:42:01
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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