zoukankan      html  css  js  c++  java
  • css实现图片垂直居中

    1、行高 == 高度:已知图片的高宽

    <div style="text-align: center;  500px;height:200px; line-height:200px; border: green solid 1px;">
       <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
    </div>

    2、display:table display:table-cell:不兼容IE6/IE7

    <div style="text-align: center;  500px;height:200px; display: table;border: green solid 1px;">
        <span style="display: table-cell; vertical-align: middle; "><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></span>
    </div>

    3、绝对定位:已知图片的高宽

    <div style=" 500px;height:200px; position: relative; border: green solid 1px;">
        <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style=" 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
    </div>

    4、flex布局:h5端可用

    <style type="text/css">
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }
    
        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }
    
        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>
    
    <div class="ui-flex justify-center center" style="border: green solid 1px;  500px; height: 200px;">
        <div class="cell">
        <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
        </div>
    </div>
  • 相关阅读:
    ElasticSearch 2 (15)
    ElasticSearch 2 (14)
    ElasticSearch 2 (13)
    ElasticSearch 2 (12)
    浅谈 Comet、SSE、WebSocket
    js快速将字符串数组转化为数字数组(互换)
    如何给自己的vue组件做一个提示
    顶级域名和子级域名之间的cookie共享和相互修改、删除
    前端工程化
    数据校验工具 data-police
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/7839563.html
Copyright © 2011-2022 走看看