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

有乐亭脸狐
  • 33

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相应的需要实现的效果
图片描述

实际上实现的效果
图片描述

回复
阅读 2.5k
2 个回答

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

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

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

对于vertical-align的理解,可以看看张鑫旭大神的理解:
我对CSS vertical-align的一些理解与认识(一)

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏