需要在div旁边垂直对齐图像

Question

标题

我需要在特色产品的价格旁边对齐标签（示例中的标签包含“Aussie Made”文字）。

我需要在价格旁边垂直对齐“Aussie Made”图像（底部对齐）。价格可以在宽度和高度上动态变化。有人可以给我一些关于如何使“澳大利亚制造”的图像/图标浮动在右边但仍然在div底部对齐的想法吗？

我试着把 包含Aussie Made图标的div上的 position:absolute; bottom:0px 。但它没有用。有人可以帮我这个吗？

Answer 1

您尝试使用RELATIVE位置吗？ 与PARENT容器相关？

Answer 2

这应该给你一个想法：

CSS

.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; } 
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; } 

HTML

<div class="container"><div class="image"></div></div>

Answer 3

请原谅，你说得对，它绝对没有相关性...... 虽然绝对位置实际上使内容相对于父级。

见下图。

和代码......

    <style type="text/css">
.Main
 {
  position: absolute;
  left: 400px;
  top: 200px;
  width: 469px; 
  height: 280px; 
 }
 .Photo
 {
  width: 469px; 
  height: 280px; 
  z-index: 1;
 }
 .Caption
 {
  position: absolute; 
  left: 0px;
  top: 250px;
  width: 461px; 
  height:32px;
  padding-left: 8px;
  background-color: #FF0000; 
  color: #FFFFFF;
  font-family: tahoma; 
  font-size: 20pt; 
  text-align: left; 
  vertical-align: middle; 
  z-index: 2;
 }
 .Price
 {
  position: absolute;
  left: 330px;
  top: 215px;
  width: 122px;
  height: 40px;
  text-align: center; 
  vertical-align: middle; 
  z-index: 3;
  color: #CC3300; 
  font-size: 20pt; 
  background-color: #FFFF00;
 }
 .MiniText
 {
  top: 4px;
  color: #111111;
  font-size: 8pt;
  font-weight: bold;
  font-family: Tahoma;
 }
</style>
<div style="left: 0px; top: 0px; height: 800px;">
 <div class="Main">
  <img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
  <div class="Price" style="z-index: 4">
   <div class="MiniText">First of it's kind!</div>
    £100.97p
         </div>
        <div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
 </div>
</div>