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>
  • 相关阅读:
    [PoC]某B2B网站的一个反射型XSS漏洞
    Python中的基本语句
    视频: 千重浪Linux系统调试技术培训 03-01_Basic-CPU-Register
    POJ 2955 Brackets (区间dp 括号匹配)
    LeetCode 146 LRU Cache
    Poj1734题解
    Python
    小胖说事29-----iOS中Navigation中左滑pop页面的三种方法
    深入理解javascript之原型
    android 弹幕评论效果
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/7839563.html
Copyright © 2011-2022 走看看