从底部定位图像

Question

我的图像应位于屏幕底部附近。我有一个主图像作为背景图像，并将根据浏览器大小调整大小。我需要背景图像上的图像从底部20-30px，无论屏幕大小或屏幕大小调整。 （图像也必须居中。）

我不知道该怎么做。做这个的最好方式是什么？

以下是我尝试的代码：

.bottom{
  position:absolute;
  margin-left: -355px; /* Image is 710 in width */
  left:50%;
  bottom:-20px;
 }

该代码将图像正确放置在页面中心，但不是从底部开始的20px。此外，我在图像下方有内容，我希望内容保持在图像下方，但它现在出现在图像上方。

HTML：

 <img class="bottom" src="src-path.png" alt="Text" />

 <p style="clear:both;">&nbsp;</p>

 <!-- More Content here that consist of img and p tags. --> 

Answer 1

我想将图像从底部定位20-30像素，你可以使用css属性

margin-bottom:30px;或20px什么价值适合你。 对齐中心使用vertical-align:middle请分享更清楚的代码。希望我能正确回答。

CSS Together必须如下： -

margin-bottom:30px;
vertical-align:middle;

Answer 2

您最好使用CSS文件，在其中声明页脚位于页面底部。然后将您的图像放在您的页面中，使用该CSS的类和“页脚”的ID。够清楚吗？

Answer 3

这是我最终做到这一点的方式：

的 CSS： 的

.image_block    {
  /* Size of image is where the width/height come from */
   width: 710px;
   height: 500px;
}

.image_block a  {
   width: 100%;
   text-align: center;
   position: absolute;
   bottom: 0px;
}

.image_block img    {
   /*Nothing Specified */ 
}

的 HTML： 的

<div class="image_block">
   <a href="#"><img src="src.png" alt="Alt Text" /></a>
</div>