0

我有一个应该位于屏幕底部附近的图像。我有一个主图像，它是背景图像，将根据浏览器大小调整大小。无论屏幕大小或调整屏幕大小，我都需要背景图像上方的图像距底部 20-30 像素。（图像也必须居中。）

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

这是我尝试过的代码：

.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. -->
4

3 回答 3

0

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

margin-bottom:30px; 或 20px 任何适合您的值。用于在中心对齐使用vertical-align:middle请分享更清晰的代码。希望我回答正确。

CSS Together 必须看起来像：-

margin-bottom:30px;
vertical-align:middle;
于 2012-07-04T05:59:52.020 回答
0

您最好使用 CSS 文件，在该文件中声明页脚位于页面底部。然后把你的图片放在你的页面中，带有那个 CSS 的类和“页脚”的 id。够清楚吗？

于 2012-07-04T06:00:18.020 回答
0

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

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>
于 2012-07-04T16:34:57.937 回答