CSS代码(四):float元素的垂直居中

在前端程序的开发中,经常会遇到将float元素垂直居中的应用场景,并且结合的场景非常之多,如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应用场景,在大部分的情况下,采用的方案有如下三种:
1. 采用flex布局;
2. 综合运用line-height、margin与padding;
3. 综合运用相对定位与绝对定位;

第一种方案,嵌套略显复杂,并且实现起来感觉较重,灵活性稍差;第二种方案在大部分的情况下都简洁高效,但碰到复杂的情况,例如inline元素的自动延伸,可能需要非常繁琐的调试过程,并且扩展性稍差,第三种纯属工作量的问题,对流式布局的自动适应性几乎破环得一干二净(不到万不得已,我一般不会采用此方法)。

今天介绍一种利用table-cell布局的方法,简单高效,并且扩展性较强,尤其是在垂直居中的应用上,几乎是通杀。

首先看看应用场景,在菜单的右侧添加操作按钮与图表,要求与菜单的文字垂直居中对齐,以下是布局代码:

<ul class="list-group" style="font-size : 14px;">
    <li class="list-group-item">
            <a href="javascript:void">人员管理</a>
            <i class="glyphicon glyphicon-tags glyphicon"></i>
    </li>
    <li class="list-group-item">
            <a href="javascript:void">角色管理</a>
            <button class="btn btn-xs btn-primary">添加</button>
    </li>
    <li class="list-group-item">
            <a href="javascript:void">组织机构</a>
            <button class="btn btn-xs btn-primary">添加</button>
    </li>
</ul>

以下是相关元素的样式:

.list-group-item {
    /* 触发BFC, 防止float塌陷*/
    overflow : hidden;      
}
.list-group-item a {
    float : left;
}
.list-group-item .glyphicon, .list-group-item .btn{
    float : right;
}

改进的方法很简单,为菜单项、按钮、图标添加包装元素,并将元素的显示样式设置为“table-cell”,样式如下:

.wrapper {
    display : table-cell;               
    width : 300px;
    height : 30px;
    vertical-align: middle;
}

相关的HTML代码如下:

<li class="list-group-item">
    <!-- 添加包装元素 -->
    <div class="wrapper">
        <a href="javascript:void">组织机构</a>
        <button class="btn btn-xs btn-primary">添加</button>
    </div>
</li>

最后的效果如下所示,左边是未添加包装元素的效果图,右边是包装后的效果。

结论

利用table-cell来排列元素,在垂直居中上处理上效果斐然,但是table-cell布局有个缺点:不能使用相对的宽度与高度(百分比)。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值