大佬!请教一个关于div中图片位置问题?

页面底部写了几行公司地址之类的文字,居中,打算把二维码也放上去,靠在这个居中的后面。摆放了半天图片位置还是没搞定。做背景位置只有top right,看起来最接近,但是跑到右上角了,而不是右中。资源代下载99dxz有朋友能提供点思路吗?

<div class="footer">

  <div class="address">

    <div>设为首页关于百度About Baidu百度推广使用百度前必读意见反馈帮助中心</div>

    <div>©2020 Baidu (京)-经营性-2017-0020京公网安备11000002000001号京ICP证030173号</div>

  </div>

  <div class="logo">

    <img src="https://login.weixin.qq.com/qrcode/wcsOt6M3rg==" alt="">

  </div>

</div>

<style>

.footer {

  width: 100%;

  text-align: center;

}

.address, .logo {

  display: inline-block;

}

.logo img {

  max-width: 50px;

  max-height: 50px;

}

</style>

.footer{
display: flex;
align-items: center;
justify-content: center;
background-color: #00ACC1;
padding: 20px 0;
}

<footer class="footer">
<div>
<p>公司地址:公司地址公司地址公司地址公司地址</p>
<p>公联系电话:18888888888</p>
</div>
<div>
<img src="images/qrcode.png" width="60" />
</div>
</footer>

<div class="footer">
        <div class="address">
            <div>设为首页关于百度About Baidu百度推广使用百度前必读意见反馈帮助中心</div>
            <div>©2020 Baidu (京)-经营性-2017-0020京公网安备11000002000001号京ICP证030173号</div>
            <div class="logo">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591094434970&di=c0bdc9d16da9d8bd4c6dd195dd615c81&imgtype=0&src=http%3A%2F%2Fimg.haote.com%2Fupload%2Fqrcode%2F1339%2Fhaote31ca2e8f449f4dc0a601feca11584866.png" alt="">
            </div>
        </div>
</div>

.footer {
            width: 100%;
            height: 200px;
            text-align: center;
            background: pink;
        }
        .address {
            font-size: 24px;
            text-align: center;
            line-height: 1.8em;
            margin: 50px auto;
            display: inline-block;
            position: relative;
        }
        .logo {
            width: 120px;
            height: 120px;
            position: absolute;
            top: 50%;
            right: -135px;
            margin-top: -60px;
        }
        .logo img {
            width: 100%;
            height: 100%;
            display: block;
        }

 

给他也用一个div盒子装起来

谢谢大家! 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值