css 让图片和文字的div 垂直居中办法 实用总结

1. 图片和文字的 整体DIV 垂直居中

HTML结构 这里div 高度谷歌下查看是63px, 图片使用vitical-align:middle居中 文字行高居中 文字顶部对齐vetical-align:top;

只需要div的父元素 li设置

position: relative;
子元素DIV 设置样式 主要固定一下高度 使用margin:auto;

margin: auto;
height: 63px;
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;

浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。　

参考链接

http://www.cnblogs.com/oooweb/p/using-css-center-and-middle.html

 <ul class="list-advantage-one">
            <li>
               <div>
                   <span><img src="images/list_advantage_one_1.png"></span>
                   <p>1个管理平台整合虚拟机和物理机,国内首个IDC+云一体化运维</p>
               </div>

            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_2.png"></span>
                <p>200G公共网络运营商出口</p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_3.png"></span>
                <p>3大自有物理数据中心支撑</p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_4.png"></span>
                <p>41个城市光纤直达,快速建立私有云物理通道
                </p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_5.png"></span>
                <p>5000GB内网真正SDN网络交换容量络
                </p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_6.png"></span>
                <p>6重安全保障 物理隔离与逻辑隔离相结合离相结合
                </p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_7.png"></span>
                <p>7大自有BGP核心级CDN节点心级CDN节点
                </p>
                </div>
            </li>
            <li>
                <div>
                <span><img src="images/list_advantage_one_8.png"></span>
                <p>计算.网络存储性能高于行业水平80%</p>
                </div>
            </li>

        </ul>