banner部分
- .banner与.header的连接处有一条白色的多余部分:
在此处设置overflow:hidden即可解决
header > .container {
position: relative;
width: 1200px;
margin: 0 auto;
overflow: hidden;}
- 设置文字所在的container水平垂直居中的方法:
给banner区域的标题设置宽度,再设置text-align:center;文字就会居中显示;但是如果要实现contianer元素的水平和垂直居中,就要去计算他详细的值(图片高宽-标题高宽/2),使用定位的top和left属性使其居中。
如果想居中的话可以设置left为50%,然后再margin-left:负的宽度的一半。注意设置了left:50%,效果文字从50%的位置开始显示,所以偏右。
.banner > .container {
position: absolute;
color: #fff;
width: 1200px;
text-align: center;
top: 278px;
left: 50%;
margin-left: -600px;}
- margin:0 auto;跑到哪里去了?
如果给div的宽度设置了100%,就没必要再设置margin:0 auto;了;
margin:0 auto;是给有宽度限制的元素设置水平居中的。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦