码迷,mamicode.com
首页 > 其他好文 > 详细

关于背景图相对父容器垂直居中问题

时间:2016-06-16 21:30:26      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

<div class="register-wrapper">
                <div class="register">
                    <h1><span class="icons icons-home"></span>XXX网站首页!</h1>
                    <div class="register-links-wrapper">
                        <ul class="register-links">
                            <li class="icons icons-sina"></li>
                            <li class="icons icons-qq"></li>
                            <li class="login"><a href="#">登录</a></li>    
                            <li class="regis"><a href="#">注册</a></li>
                        </ul>
                    </div>
                </div>
            </div>
/* register 头部最顶层*/
.register-wrapper{
    width: 100%;
    background-color: #dcdcdc;
    margin-bottom: 30px;
}
.register{
    width: 1000px;
    height: 30px;
    margin: 0 auto;
}
.register-wrapper{
    line-height: 30px;
}
.register h1{
    display: inline-block;
    font-size: 12px;
    color: #898989;
}
.register span,
.collection span{
    display: inline-block;
}
/* S 导入小图标 */
.icons{
    display: inline-block;
    background: url(../images/icons.png) no-repeat center center;
}
.icons-home{
    width: 14px;
    height: 12px;
    background-position: 0 0;
    margin-right: 5px;
}
.icons-sina{
    width: 25px;
    height: 22px;
    background-position: -30px 0;
}
.icons-qq{
    width: 25px;
    height: 22px;
    background-position: -60px 0;
}
.icons-coll{
    width: 10px;
    height: 22px;
    background-position: -90px 0;
}

/* E 导入小图标 */

/*  头部顶层的链接  */
.register-links-wrapper{
    display: inline-block;
    float: right;
}
.register-links li{
    display: inline-block;
    margin-right: 5px;
}
.register-links li a{
    display: inline-block;
    font-size: 12px;
    color: #34bf82;
    margin-left: 5px;
}
.register-links li:last-child:before{
    content :"|";
    color: #34bf82;
}

搞不懂为什么这段代码中,新浪和qq的背景图[1]是单独用一个标签包起来的。登陆和注册[2]也是,设置[1]高度的时候,[2]的高度也跟着变化了。。哪里出了问题??

 

导入背景图,怎么让它相对父容器垂直居中显示??

关于背景图相对父容器垂直居中问题

标签:

原文地址:http://www.cnblogs.com/lal-fighting/p/5592064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!