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;
}最终效果图:

具体怎么修改代码可以实现文字居中。
29
收起
正在回答 回答被采纳积分+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的使用方法,前者必须设置在父元素上,后者必须设置在子元素上。希望对你有帮助,祝学习愉快,欢迎采纳。
相似问题
登录后可查看更多问答,登录/注册
HTML5与CSS3实现动态网页 2018
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星