吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1080|回复: 4
收起左侧

[求助] CSS移动端居中的问题

[复制链接]
cqwcns 发表于 2022-7-12 13:46
以下Demo,需求是实现一个图片的水平居中显示,代码是这样的:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .img {
        width: 643px;
        aspect-ratio: 643/3213;
        background-image: url("https://s1.ax1x.com/2022/07/12/jgl0MV.png");
        background-size: cover;
    }
</style>

<body>

    <div class="content">
        <div class="img"></div>
    </div>

</body>

</html>


效果:在PC浏览器下,一切正常,效果大概是这样的:
1.png

2.png

问题:在于移动端测试时,无论时在浏览器仿真还是在真是的手机浏览器中,都会出现偏移,硬生生在左侧留出空白,导致无法居中显示:
3.png

4.png

我希望移动端已PC端有一样的效果,保持居中。
研究了半天也找不出问题,请各位大佬指教,谢谢。

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

xy308058 发表于 2022-7-12 14:10
.img  width: 100%;
271378333 发表于 2022-7-12 14:24
html写的太简单了,规定一下内容宽度
<meta name="viewport" content="width=device-width">

免费评分

参与人数 1吾爱币 +2 热心值 +1 收起 理由
cqwcns + 2 + 1 谢谢@Thanks!

查看全部评分

一只小凡凡 发表于 2022-7-12 14:44
rainbow270118 发表于 2022-7-12 15:28
三楼正解,移动端宽度不固定,你的.img设置的width太大了,而且aspect-ratio保持了长宽比得设置

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
cqwcns + 1 + 1 谢谢@Thanks!

查看全部评分

您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 09:28

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表