为了账号安全,请及时绑定邮箱和手机立即绑定

2017/02/04 Html5作业中遇到的问题

标签:
Html/CSS

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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消