Question

当移动浏览器置于横向模式时，图像或任何元素不会自行定位：

HTML代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
</head>
<style>
body{
background: url("bimg.jpg");
margin:0;
background-size: cover;
background-repeat: no-repeat;
}
</style>
<body>
<img src="image.png" style="position:relative;top:300px; left:550px;">
</body>
</html>

我浏览器的屏幕截图：

普通模式：

横向模式：

Answer 1

Florin Pop说的是真的。此外，如果要水平居中元素并且不知道它的宽度，可以使用以下代码段之一：

<div style="text-align: center;">
  <div style="display: inline-block;">123</div>
</div>

或适用于较新的浏览器：

<div style="position: absolute; left: 50%; transform: translateX(-50%);">123</div>

Answer 2

它准确定位在您告诉它的位置：距离顶部300px，从屏幕左侧550px。如果您想将它定位到中心使用：

<img src="image.png" style="position:relative;top:300px; margin: 0 auto;">

或者如果您知道图像宽度，例如：100px，您可以将其与中心对齐：

<img src="image.png" style="position:relative;top:300px; left:50%; margin-left: -50px;">

Margin-left -50px是图像宽度的一半（100px）。

图像无法根据浏览器大小动态定位

2 个答案: