在前端程序的开发中,经常会遇到将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布局有个缺点:不能使用相对的宽度与高度(百分比)。