CSS代码（四）：float元素的垂直居中
在前端程序的开发中，经常会遇到将float元素垂直居中的应⽤场景，并且结合的场景⾮常之多，如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应⽤场景，在⼤部分的情况下，采⽤的⽅案有如下三种：
1. 采⽤flex布局；
2. 综合运⽤line-height、margin与padding；
3. 综合运⽤相对定位与绝对定位；
第⼀种⽅案，嵌套略显复杂，并且实现起来感觉较重，灵活性稍差；第⼆种⽅案在⼤部分的情况下都简洁⾼效，但碰到复杂的情况，例如inline元素的⾃动延伸，可能需要⾮常繁琐的调试过程，并且扩展性稍差，第三种纯属⼯作量的问题，对流式布局的⾃动适应性⼏乎破环得⼀⼲⼆净(不到万不得已，我⼀般不会采⽤此⽅法)。
今天介绍⼀种利⽤table-cell布局的⽅法，简单⾼效，并且扩展性较强，尤其是在垂直居中的应⽤上，⼏乎是通杀。
⾸先看看应⽤场景，在菜单的右侧添加操作按钮与图表，要求与菜单的⽂字垂直居中对齐，以下是布局代码：
<ul class="list-group">
<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”，样式如下：
css设置文字垂直居中.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布局有个缺点：不能使⽤相对的宽度与⾼度(百分⽐)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。