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

【问题标题】：Need to vertically align images beside div需要垂直对齐div旁边的图像
【发布时间】：2013-09-24 07:58:26
【问题描述】：

标题

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

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

我试着把 position:absolute; bottom:0px 在包含澳大利亚制造图标的 div 上。然而它没有用。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： alignment html

【解决方案1】：

您是否尝试过使用位置 RELATIVE？相对于 PARENT 容器？

【讨论】：

Yeep 试过了。我一定在某个地方犯了一些错误。有人可以告诉我哪个 div 应该有相对位置，哪个应该有绝对位置

【解决方案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>

【讨论】：

啊哈修好了。谢谢大家:) ta

【解决方案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>

【讨论】：