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>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">橘子</span>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">梨子</span>&nbsp;<span class="text">苹果</span></li>
<li><span class="text">桃子</span>&nbsp;<span class="text">苹果</span></li>