父元素为浮动，为啥子元素也要设置浮动才能垂直居中？

Question

1.搜索子元素不设置浮动无法实现垂直居中的功能。

2.

.m-topnav .u-snav{
    display:inline-block;
    height: 90px;
    float: right;
    font:16px/90px "微软雅黑";
}
 .u-stt{
    display: inline-block;
    margin: 0 27px;
    color: #000000;
}
div .u-stt:hover,div .u-stt:focus{
    color: #21a557;
}

.u-snav .u-sch{
    display: inline-block;
    **float: right;**
    width: 20px;
    height: 20px;
    margin:35px 0;
    background: url(chaos-sprite.png) -300px -20px no-repeat;
}
.u-sch:hover,.u-sch:focus{
    background: url(chaos-sprite.png) -300px 0 no-repeat;
}

3相应的需要实现的效果

实际上实现的效果

Answer 1

这个可以使用文字的行高来实现

Answer 2

对于文字的垂直居中，可以使用vertical-align: middle;来实现。

只是在使用是需要注意一下只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

对于vertical-align的理解，可以看看张鑫旭大神的理解：
我对CSS vertical-align的一些理解与认识（一）

另外，也可以使用line-height来实现垂直居中的效果