让div里的图片和文字垂直水平居中
<html> <head></head> <body> <div id="tabList" style="height:40px;"> <li style="display:inline;font-size:14px;"> <span id="DY1" style="height:40px;line-height:40px;width:100px;float: left;"> <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> <div style="margin:auto;"> <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;" /> 动议 </div> </div> </span> <span id="DY2" style="color:black ;height:40px;line-height:40px;background: #ffffff;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">动议</span> </li> <li style="display:inline"> <span id="MZ1" style="height:40px;line-height:40px;width:100px;float: left;"> <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> <div style="margin:auto;"> <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" /> 民主推荐 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div> </div> </div> </span> <span id="MZ2" style="color:#2E8DED ;height:40px;line-height:40px;background: #FFFFFF;border:solid 1px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">民主推荐</span> </li> <li style="display:inline"> <span id="ZZKC1" style="color:black;height:40px;line-height:40px;background: #009933;border:solid 0px #dee3ec;border-right:0px; width: 100px;text-align: center;float: left;"> <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> <div style="margin:auto;"> <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" />组织考察 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-15px;"></div> </div> </div> </span> <span id="ZZKC2" style="color:#2E8DED ;height:40px;line-height:40px;background: #FFFFFF;border:solid 1px #dee3ec;border-right:0px;border-bottom:0px;width: 100px;display: block;text-align: center;float: left;">组织考核</span> </li> <li style="display:inline"> <span id="TLJD1" style="height:40px;line-height:40px;width:100px;float: left;"> <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> <div style="margin:auto;"> <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;" />讨论决定 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div> </div> </div> </span> <span id="TLJD2" style="color:#999999;height:40px;line-height:40px;background: #EEEEEE;border:solid 0px #dee3ec; border-left:0px;width: 100px;display: block;text-align: center;float: left;">讨论决定 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;"></div></span> </li> <li style="display:inline"> <span id="RZ1" style="height:40px;line-height:40px;width:100px;float: left;"> <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; width: 100%;"> <div style="margin:auto;"> <img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;" /> 任职 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div> </div> </div> </span> <span id="RZ2" style="color:#999999;height:40px;line-height:40px;background: #EEEEEE;border:solid 0px #dee3ec; border-left:0px;width: 100px;display: block;text-align: center;float: left;">任职 <div style="width: 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;"></div></span> </li> </div> </body> </html>