banner区域文字区域问题,望老师能详细解答。

banner区域文字区域问题,望老师能详细解答。

html部分:
 <section class="banner">
        <div class="content">
            <h1>Welcome to Websitebr</h1>
            <h2>lorem ipsum dolor sit amet, consectetur adipisicing</h2>
        </div>
    </section>
css部分:
/*banner*/
.banner{
    height: 670px;
    width: 100%;
    background-image: url(../img/banner.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    
}

最终效果图:

http://img1.sycdn.imooc.com/climg//58bf93ad000149db15730635.jpg

具体怎么修改代码可以实现文字居中。

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

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

2回答
小于飞飞 2017-03-08 16:22:32

你好,问题区的垂直居中的方法,适合设置positon属性。你的代码情况,可以使用下面放法解决:

css样式:

      .banner{
              height: 670px;
              width: 100%;
              background-image: url(img/banner.jpg);
              background-repeat:no-repeat;
              background-size: cover; 
              display:table;      
             }
     .content{
              text-align: center;             
              display:table-cell;
              vertical-align:middle;              
              }

多行文本固定高度的垂直居中方法: 可以将元素通过display属性模拟<table>,然后使用vertical-align垂直对齐方式来设置。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上。希望对你有帮助,祝学习愉快,欢迎采纳。

小于飞飞 2017-03-08 11:34:13

你好,在问答区详细说明了垂直居中的方法和原理,但是要根据编写的代码整体情况,进行调整和采取垂直居中的方法,根据截图不好确定编写代码的问题,可以把该部分的html、css代码传上来(不要使用截图),以便检测问题呦。祝学习愉快。

  • 提问者 孙康赫 #1
    我重新上传了代码。麻烦您再看一下
    2017-03-08 13:17:36
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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