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;
    }
  • 相关阅读:
    剑指offer11-二进制中1的个数
    剑指offer10-矩形覆盖
    剑指offer08-跳台阶
    剑指offer07-斐波那契数列
    剑指offer04-重建二叉树
    剑指offer62-二叉搜索树的第k个结点
    kimball维度建模(5)-拉链表原理、设计以及在Hive中的实现
    kimball维度建模(4)-统一数仓层DW与事实表设计
    C-宏定义
    lua-设计与实现-8环境与模块
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10243307.html
Copyright © 2011-2022 走看看