zoukankan      html  css  js  c++  java
  • 让div里的图片和文字垂直水平居中

    <div id="tabList" style="height:40px;">
    <li style="display:inline;font-size:14px;">
    <span id ="DY1" style="height:40px;line-height:40px;100px;float: left;">
    <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; 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; 100px;display: block;text-align: center;float: left;">动议</span>
    </li>

    <li style="display:inline" >
    <span id ="MZ1" style="height:40px;line-height:40px;100px;float: left;">
    <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; 100%;" >
    <div style="margin:auto;"><img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;"/> 民主推荐<div style=" 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;margin-left:-17px;"></div></div>
    </div>
    </span>

    </span>
    <span id="MZ2" style="color:#2E8DED ;height:40px;line-height:40px;background: #FFFFFF;border:solid 1px #dee3ec;border-right:0px;border-bottom:0px; 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; 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; 100%;" >
    <div style="margin:auto;"><img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;"/>组织考察<div style=" 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; 100px;display: block;text-align: center;float: left;">组织考核</span>

    </li>
    <li style="display:inline">
    <span id ="TLJD1" style="height:40px;line-height:40px;100px;float: left;">
    <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; 100%;" >
    <div style="margin:auto;"><img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;margin-right:5px;"/>讨论决定<div style=" 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; 100px;display: block;text-align: center;float: left;">讨论决定<div style=" 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;100px;float: left;">
    <div style="display:flex;color:#FFFFFF;height:100%;background: #2E8DED;border:solid 0px #dee3ec;border-right:0px;border-bottom:0px; 100%;" >
    <div style="margin:auto;"><img src="${ctxStatic}/base/images/icon.png" style="vertical-align: middle;"/> 任职<div style=" 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; 100px;display: block;text-align: center;float: left;">任职<div style=" 1px;background-color: #CCCCCC;margin: auto;height: 20px;float:left;margin-top:10px;"></div></span>
    </li>
    </div>

  • 相关阅读:
    Gradle 10分钟上手指南
    java并发编程学习: 原子变量(CAS)
    java并发编程学习: 守护线程(Daemon Thread)
    java并发编程学习: 阻塞队列 使用 及 实现原理
    java并发编程学习: ThreadLocal使用及原理
    java并发编程学习:如何等待多个线程执行完成后再继续后续处理(synchronized、join、FutureTask、CyclicBarrier)
    ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表
    gradle项目与maven项目相互转化
    rpc框架之 thrift连接池实现
    java并发编程学习:用 Semaphore (信号量)控制并发资源
  • 原文地址:https://www.cnblogs.com/konglxblog/p/10396315.html
Copyright © 2011-2022 走看看