Question

当我在浏览器上缩小到67％时，图像将显示在页面底部，因为我想在页面未正常缩小时显示（screenshot）。

但图片在我的网页上显示为this，为普通视图。

这是我的CSS

.fix {
   position: relative;
   left: 30%;
   bottom: 10%;
}

Answer 1

要使页面中的元素居中，您应该使用此CSS：

.element {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

它也适用于position: absolute和position: fixed属性。

left: 50%属性会将.element的左侧居中到页面的水平中心。

transform: translateX(-50%)属性会将.element宽度的50％转换为左侧（因为负值）。

这样，无论宽度是多少，.element都将始终水平居中。

您在图像上显示的下一个问题是它与文本重叠。为避免这种情况，您应将此元素放在文本之后。

以下是一个例子：

.fix {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
body {
  position: relative;
  padding-bottom: 100px; /* height of the image */
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png" alt="Stack Overflow" class="fix" />

另一个例子，如果你想将图像固定在底部：

.fix {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
body {
  position: relative;
  padding-bottom: 100px; /* height of the image */
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png" alt="Stack Overflow" class="fix" />

Answer 2

鉴于文本为黑色且图像也有黑色内容，请尝试将其保留为img元素而不是背景图像。

您可以尝试将padding-bottom添加到img的父元素等于图片的height。

如何将此图像定位在页面的底部中心？

2 个答案: