display: table 实现menu等高居中排列
display: table 属性，顾名思义，就是就像表格一样陈列元素，设置这个属性之后，就具有了表格所特有的某些特性，比如居中对齐之类的。
本篇文章要实现的需求也是非常常见的——左侧栏menu菜单居中显示，效果如下图所示
具体的代码如下
<ul> <li><span class="text">苹果</span></li> <li><span class="text">橘子</span></li> <li><span class="text">梨子</span></li> <li><span class="text">桃子</span></li> </ul>
具体的css如下
li{
display: table;
height: 54px;
width: 56px;
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
border-bottom: 1px solid black;
text-align: center;
color:red;
}
实现原理就是：
1. 每个li元素 设置为display:table
2. li元素下面的span设置为display:table-cell；这里的table-cell就相当于每一个td元素，然后再设置vertical-align: middle ，即可实现居中对齐
如果要实现多行多列居中对齐布局，也就是下面这个效果，只需要增加多一个span，给每个span设置宽度百分比，还可以实现按比例分配
<li><span class="text">苹果</span> <span class="text">苹果</span></li> <li><span class="text">橘子</span> <span class="text">苹果</span></li> <li><span class="text">梨子</span> <span class="text">苹果</span></li> <li><span class="text">桃子</span> <span class="text">苹果</span></li>
