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

Question

当我在我的浏览器上缩小到 67% 时，图像将出现在页面底部，因为当页面正常时没有缩小时我想要显示 (screenshot)。

但是图片在我的页面上显示为 this 正常视图。

这是我的CSS

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

Answer 1

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

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

Answer 2

要使页面中的元素居中，您应该使用此 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/Whosebug/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/Whosebug/company/img/logos/so/so-logo-med.png" alt="Stack Overflow" class="fix" />

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

How to position this image at the bottom center of the page?

html

css

centering