3-12中如何实何实现标题的垂直居中呀?老师,看下我代码?如果直接对h1设置好像没有用呢?

3-12中如何实何实现标题的垂直居中呀?老师,看下我代码?如果直接对h1设置好像没有用呢?

<!DOCTYPE html>

<html>

    <head>

   <meta charset="UTF-8">

   <title>vertical-align</title>

   <style type="text/css">

    *{padding:0px;margin: 0px;}

   

    .warp1{    

              height:80px;

              width: 100%;

              background-color: #14191e;              

              text-align:center;

              /*在此补充代码*/

             }

             span{vertical-align:middle;}


     .warp1 h1{ color:#fff;

       /*在此补充代码*/ }


     .warp2{

              height:400px;

              width: 100%;

              border:1px  #14191e solid;

              /*在此补充代码*/                    

             }


     .content{    

              line height:1.5em;

              font-size:14px;

              text-align:left;/*在此补充代码*/

              }


     .content  p{ width:500px;

                  font-family: "微软雅黑";

                  margin:0 auto;

        /*在此补充代码*/}   


   </style>

</head>

<body>

<div class="warp1">

          <h1><span>欢迎来到慕课网</span></h1>      

</div>

  <div class="warp2">

        <div class="content">

           <p>慕课网,只学有用的!</p>

           <p>慕课网(IMOOC)是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性,你还可以和朋友一起编程。</p>

        </div>

</div>    

</body>

</html>


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

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

1回答
Steve007 2019-01-24 09:49:31

同学,你好。这里对h1直接设置不管用是因为在h1中又包裹了一个span标签,span标签是行内元素,对span设置高是不生效的,这里直接将标题放在h1标签中,然后对h1设置垂直居中就会生效了。如图:

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

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

祝学习愉快!

  • 提问者 shine62 #1
    老师,vertical-align:middle这个只能用于设置内联元素,对不对呢?和line-height有什么区别吗?
    2019-01-24 17:39:57
  • Steve007 回复 提问者 shine62 #2
    同学,你好。vertical-align:middle属性是定义行内元素(内联元素)的基线相对于该元素所在行的基线的垂直对齐,它确实是只对于内联元素生效。而line-height是设置块级元素中文本的垂直居中。
    2019-01-24 19:10:40
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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