将 div 放在居中的图像顶部

Posted 2023-03-05

【中文标题】将 div 放在居中的图像顶部

【英文标题】：Place div on top of image that is centered

【发布时间】：2012-12-24 14:59:35

【问题描述】：

我有一个如下所示的标记：

<div style="width: 150px; height: 250px;">
    <img src="Image1.jpg" />

    <div class="YellowExclaimIcon iconsBlack"></div>
</div>

我想要达到的目标如下：

意味着图像应始终放置在父 div 的中心（水平和垂直），警告图标应位于图像顶部，右侧和底部的边距为 5。

另外需要注意的是，图片的宽度和高度并不总是一样的，但是警告图标的位置应该总是正确的。

YellowExclaimIcon 类包含背景图像，但如果需要，可以将其更改为图像。需要考虑的是图像还具有最大宽度和最大高度。

我尝试使用此线程 CSS Help - div over image 中的答案，但无法使其与居中一起使用。

【问题讨论】：

您可以更改标记吗？因为如果图像的宽度是可变的，我认为你不能在不改变标记的情况下做到这一点......

是的，我可以随心所欲地更改标记。图像宽度可变。

谢谢，我已将您的答案标记为答案。

【参考方案1】：

如果图像的宽度和高度是可变的，则只能通过更改标记来实现，如下所示：

<style type="text/css">
    div.container 
        width:150px; height:250px; display:table-cell; vertical-align:middle; 
        text-align:center; background-color:#ededed
    div.image 
        position:relative; display:inline-block; 
    div.image img 
        display:block; 
    div.YellowExclaimIcon 
        position:absolute; width:80px; height:80px; bottom:5px; right:5px; 
        background:transparent url(your-icon.png) no-repeat 100% 100%
</style>

<div class="container">
    <div class="image">
        <img src="Image.jpg"  />
        <div class="YellowExclaimIcon"></div>
    </div>
</div>

上面的示例将始终在中心水平和垂直对齐图像，右下角有一个图标，5px 边距。

检查工作样本：http://jsfiddle.net/Q9uhV/

【参考方案2】：

制作您的警告图片absolute，以便您可以将其放置在指定位置的另一张图片上。

html：

<div class="container">
  <img src="penguin.png" />
  <img class="warning" src="warning.png" />
</div>

CSS：

.warning 
  position:absolute;
  left:80px;
  top:80px

请参阅this jsFiddle 以获取演示。

【参考方案3】：

使用position:relative 到外部div 和absolute 到内部div

HTML

    <div class="outer">

    <div class="YellowExclaimIcon"></div>
</div>

CSS

 .outer
  width: 150px; height: 250px; 
  border:solid red 1px;
  position:relative;
  vertical-align:middle;
  background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;

.outer imgtext-align:center; vertical-align:middle
.YellowExclaimIcon  
  position:absolute;
  width:100%;
  height:100%;
  top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;

DEMO

【参考方案4】：

你需要像这样使用 z-index 和一些定位：

<div style="width: 150px; height: 250px;">
    <img src="Image1.jpg" style="z-index:-1" />

    <div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>

..例如，将边距设置为所需的值。