关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

html

css

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

新浪和qq的背景图[1]是单独用一个标签包起来的。登陆和注册[2]也是，设置[1]高度的时候，[2]的高度也跟着变化了。

/* 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;
}

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

导入背景图，怎么让它相对父容器垂直居中显示？？ vertical-align: middle;

行内块级元素垂直居中：vertical-align: middle;

vertical-align的值为：baseline middle top bottom...... (没有center这个值！！！)

/* 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,
.register a,
.collection span,
.collection a{
    display: inline-block;
    vertical-align: middle;
}
/* S 导入小图标 */
.icons{
    display: inline-block;
    background: url(../images/icons.png) no-repeat center center;
}
.icons-home{
    width: 14px;
    height: 16px;
    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: 25px;
    height: 22px;
    background-position: -90px 0;
}
.icons-time{
    position: relative;
    top: -25px;
    left: 240px;
    width: 20px;
    height: 20px;
    background-position: -120px 0;
}
/* E 导入小图标 */

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

（以下 vertical-align 和 line-height 之间的区别和 vertical-align的解释来自百度知道）

1. vertical-align 适用于一些特定的显示样式，如表格单元。

2，lin-height 适用于所有的块级元素。

区别，vertical-align 相对于 line-height 的一个好处是，如果有多行文字，他也是垂直居中的。line-height是行高。测试例子如下：（例子来自百度知道）

html：

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

css：

div{
 width:200px;
 height:115px; 
border:4px solid #ebcbbe; 
display:table-cell;
vertical-align: middle;
}

效果如下：

（以下摘自百度知道http://zhidao.baidu.com/link?url=m85_HAZOtvrPh8_Jg8OvFJaD7LxGofYRTuwlwNWfgsJTFLGDzJfaRPoTQYIUwMGT1PE9FmzfM47Xe_OdE-Q4bK 中 learnone 的回答）

vertical-align是什么意思？先举个例子！

这句html元素中的文本为什么不能垂直居中。

<style>

span{ height:60px;vertical-align: middle; #1c93b7;

}

</style>
<span >
dddddddda</span>
我用浏览器试了一下，它的展示图如下：

vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
top：和本行位置最高元素对齐。
bottom：和本行位置最低元素对齐。

如果按照字面意思理解vertical-align:middle就应该是文字在元素的垂直位置的最中央，把入前面那个标签中，它的位置应该在一个height为60px的box的中央啊。但是事实上不是这样的。
如果这个vertical-align:middle用来定义一个单元格td，那么它和你想像的一样起作用，看看下面的例子
<tr>
<td style="height:80px;vertical-align:middle" onmouseover="this.style.verticalAlign='bottom'"
onmouseout="this.style.verticalAlign='middle'">
text to align</td>
</tr>
</table>

W3C官方对vertical-align做了下面的解释：

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。前面那个 span定义了一个60px的高度，但是这个span的Box中存在很多行，那段文本并不能对齐到span的中央。因此希望那段文本对齐span的中行，需要给它定义一个line-height的属性，让line-height为60px，作用于一行的vertical-align就按你的想法工作了。

table的单元格，因为是一行内的元素，因此vertical-align按照我们的想法来工作，但是在span中并不是这样的。

posted @ 2016-06-16 19:56 liaoali 阅读(468) 评论(2) 编辑收藏举报

刷新页面返回顶部

LAL-alice

关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

公告