移动端图片上下居中且按钮始终保持在图片底部一定距离

Posted 2020-10-03

最近开发中经常碰到这样的问题：活动中需要一个弹层，弹层是一张图片，图片上有一个按钮，一般是指向一个链接地址的。在手机里，要求图片大小尺寸不限，但是要上下左右居中，并且图片上的按钮保存在图片底部一定位置。

贴代码：html代码

<div class="floatResult">
        <div class="bg"></div>
        <div class="result">
            <span class="span"></span>
            <span class="image">
                <img src="img/gameover0.png" alt="闯关成功">
                <a class="imgBtn" href="javascript:void(0);">返回</a>
            </span>
            <span class="span"></span>
        </div>
    </div>

css代码

.floatResult {
        /*display: none;*/
    }

    .floatResult .bg {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .floatResult .result {
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

    .floatResult .result .span {
        display: inline-block;
        width: 1%;
        height: 100%;
        vertical-align: middle;
    }

    .floatResult .result .image {
        width: 80%;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    .floatResult .result img {
        width: 100%;
        vertical-align: middle;
    }

    .floatResult .result .imgBtn {
        display: inline-block;
        width: 70%;
        position: absolute;
        left: 50%;
        bottom: 8%;
        margin-left: -35%;
        height: 44px;
        line-height: 42px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        border-radius: 22px;
        background: #ff4345;
        text-decoration: none;
    }

目录结构如下：

 

本例按钮是用css制作的。还可以，直接用图片来顶替。直接用图片的话，自适应效果会更好些。