iPhone 图像不会居中答案

【问题标题】：iPhone image won't centeriPhone 图像不会居中
【发布时间】：2021-05-30 05:39:01
【问题描述】：

尝试将 iPhone 版本的照片合并到我的网站，但它仅在 iPhone 水平放置时居中。垂直时，图像“zoe-iphone.png”会流到屏幕右侧。有什么办法可以调整此代码以使图像居中？在台式机上看起来不错。

<html>
<div class="w3-container w3-center">
   <p>
       <picture>
       
       <div class = "center">
       <source media="(max-width: 790px)"
                srcset="zoe-iphone.png">
        </div>
        
        <source media="(min-width: 791px)"
                srcset="zoe2.jpg">
                
         <img src="zoe2.jpg" max-width="80%" height="400"> 
       
       </picture>
       </p>
</div>
</html>

【问题讨论】：

标签： html css iphone image

【解决方案1】：

我建议使用 flexbox。

center {
  flex-direction: column;
    justify-content: center;
    align-items: center;
}

<html>

<body>
    <main class="center">
        <p>
            <picture>
                <source media="(max-width: 790px)" srcset="zoe-iphone.png">
                <source media="(min-width: 791px)" srcset="zoe2.jpg">
                <img src="zoe2.jpg" max-width="80%" height="400">
            </picture>
        </p>
    </main>
</body>

</html>

它也可能因为边距而没有居中。尝试将边距设置为 0 或灵活的图像大小。 https://www.w3schools.com/howto/howto_css_image_responsive.asp

编辑：现在它应该可以工作了

* {
    margin: 0
}

main {
    padding: 1rem;
    justify-content: center;
    align-items: center;
  }

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <picture>
            <source media="(max-width: 790px)" srcset="zoe-iphone.png">
            <img src="zoe2.jpg" width="100%" height="auto">
        </picture>
    </main>
</body>

</html>

【讨论】：

我都试过了，但都没有成功：/这可能是我设置最大宽度的方式吗？因为手机横着看就好了
你的 iPhone 的分辨率是多少？