zoukankan      html  css  js  c++  java
  • 实现不同尺寸的图片在固定的区块内实现水平垂直居中

    利用absolute定位的不固定宽高垂直实现方法(position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;)

    展示效果

    html

    <div class="cooperate-content">
        <div>
            <div><img src="secure-partner7.png?v=6.2.68"></div>
            <div><img src="secure-partner6.png?v=6.2.68"></div>
            <div><img src="secure-partner16.png?v=6.2.68"></div>
            <div><img src="secure-partner3.png?v=6.2.68"></div>
            <div><img src="secure-partner14.png?v=6.2.68"></div>
            <div class="no-margin"><img src="secure-partner9.png?v=6.2.68"></div>
        </div>
        <div>
            <div><img src="secure-partner10.png?v=6.2.68"></div>
            <div><img src="secure-partner12.png?v=6.2.68"></div>
            <div><img src="secure-partner15.png?v=6.2.68"></div>
            <div><img src="secure-partner2.png?v=6.2.68"></div>
            <div><img src="secure-partner5.png?v=6.2.68"></div>
            <div class="no-margin"><img src="secure-partner13.png?v=6.2.68"></div>                
        </div>
        <div>
            <div><img src="secure-partner1.png?v=6.2.68"></div>
            <div><img src="secure-partner8.png?v=6.2.68"></div>
            <div><img src="secure-partner11.png?v=6.2.68"></div>
            <div><img src="secure-partner4.png?v=6.2.68"></div>
            <!-- <div class="no-margin "><img src="secure-partner4.png?v=6.2.68"></div> -->
            <div class="hope">期待您的加入 ··· ··· </div>
        </div>
    </div>

    css:

    .cooperate-content {
         1024px;
        height: 325px;
        margin: 0 auto;
        overflow: hidden;
    }
     .cooperate-content>div div {
        position: relative;
        display: inline-block;
         149px;
        height: 81px;
        line-height: 81px;
        vertical-align: middle;
        background-color: #FFF;
        margin: 0 20px 40px 0;
    }
    .cooperate-content img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
  • 相关阅读:
    Java 包装类的自动封箱与拆箱
    Java 基本类型的包装类
    Java日期时间练习三(闰年)
    导入包与模块
    模块_os模块
    Re模块练习题
    Re模块的方法补充
    Re模块的 三个方法
    基础纹理
    ruby 的数组操作
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10243307.html
Copyright © 2011-2022 走看看