CSS妙用垂直居中对齐一行中多个元素

不管是水平居中对齐，还是垂直居中对齐，一直是个老生常谈的问题，之前也收集了很多解决方法，比如水平居中对齐常用

div{  margin:0px auto;}的方式解决；垂直对齐则使用div{height：20px;line-height:20px;}这两种方式确实帮忙解决了大部分居中对齐的问题，但是在最近一个项目中，一个简单的页面，垂直居中对齐上述方法却不太好用。页面如下：

三个元素独立成块，要是实现响应式自动换行，并且始终垂直居中对齐。html代码如下：<div >        <ul>            <li class="item">                <a href="#">                        <div class="icon">                            <img src="icon.png" alt="" />                        </div>                        <div class="text">4G终端销量</div>                        <div class="num ">9102</div>                </a>            </li></ul></div>默认状态下三个div独立成行，一行显示的方法可以使用display：inline-block属性，或者浮动，inline-block有图片的情况下默认为基线对齐，浮动默认顶部对齐尝试过多种方法后，一下方法效果最满意。首先给三个div外加一个父容器，设置宽度为100%，display：table代码如下：item-content{  width: 100%;   display: table;}然后子元素分别做如下设置：.icon{  width:4%;  display: table-cell;  vertical-align: middle;}.text{  width:66%;display:table-cell;  vertical-align: middle;}.num{  width: 28%;  text-align: right;  display:table-cell;  vertical-align: middle;}上述方法主要是使用了表格化布局属性，实现效果。