zoukankan      html  css  js  c++  java
  • 让一个图片在div中居中(4种方法)

    第一种:
    <div class="title">
        <div class="flag"></div>
        <div class="content">
            <img src="img_p1_title.png">
        </div>
    </div>
    css:
    .title {
        width: 100%;
        font-size: 0;
        height: 10%;
    }
    .title .content img {
        width: 35%;
    }
    /* -- 主要的 -- */
    .content {
        display: inline-block;
        vertical-align: middle;
    }
    .flag {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0;
    }
    -----------------------------------------------------------------------------------------
    第二种:
    <div class="title">
        <img src="img_p1_title.png">
    </div>

    css:

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .title img {
        width: 35%;
    }

    // 该方法有些旧系统不支持

     
    -----------------------------------------------------------------------------------------
    第三种:
    <div class="title">
        <span>第三种方法</span>
    </div>
     
    css:
    .title {
        height: 15%;
        position: relative;
    }
    .title span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    -----------------------------------------------------------------------------------------
    第四种:
    <div class="title">
        <span>第四种方法</span>
    </div>

    css:

    .title {
        width: 200px;
        height: 200px;
        vertical-align: middle;
        display: table-cell;
        text-align: center;
    }
  • 相关阅读:
    IOS开发--常用的基本GDB命令
    iOS 开发技巧-制作环形进度条
    提高Objective-C代码质量心机一:简化写法
    iOS 删除 Main.storyboard 和 LaunchScreen.storyboard
    iOS扫一扫功能开发
    ASP.NET中Json的处理
    WebService的使用
    嵌入Web资源的方法
    URL重写 UrlRewrite
    ASP.NET全局文件与防盗链
  • 原文地址:https://www.cnblogs.com/queende7/p/8668429.html
Copyright © 2011-2022 走看看