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

最新推荐文章于 2022-08-11 09:58:10 发布

liuji0517

最新推荐文章于 2022-08-11 09:58:10 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/liuji0517/article/details/106598882

版权

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

<div class="footer">

<div class="address">

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

</div>

<div class="logo">

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

</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;
        }