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

Question

标题

我需要对齐标签旁边的价格在特色产品(标签在例子中的特点，文字“澳大利亚制造”)。

我需要垂直对齐“澳大利亚制造”图片旁边的价格(底部对齐)。价格可以动态变化的宽度和高度。有人能给我一些想法，如何使“澳大利亚制造”的图像/图标漂浮在右边，但仍然在div的底部对齐？

我试着把position:absolute; bottom:0px放在包含澳大利亚制造图标的div上。但是它没有起作用。有人能帮我一下吗？

Answer 1

你试过用相对位置吗？相对于父容器而言？

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>