CSS-如何使用CSS高度、垂直对齐和溢出隐藏容器顶部？

我有一个基于Jquery Mobile listview元素结构的图像容器

看起来像这样：

<li>
 <div class="ui-btn-inner">
  <div class="ui-btn-text">
    <a>
     <img src="img/products/l/demo2.jpg">
     <h3>product2</h3>
    </a>
  </div>
 </div>
</li>

li a {
  position:absolute;
  bottom: 0;
  left: 0;
  }
li div.ui-btn-text {
 position: relative;
 height: 100px;
 overflow: hidden;
 }

它不起作用。。。如果我检查Firebug，元素高度设置为100px，但它覆盖了图像顶部，而不是图像底部和h3，我不想裁剪掉

我也尝试过将线高度设置为100px，但这根本不起作用

有没有关于我做错了什么的线索

谢谢

编辑： 也不能使用clip，因为我不知道在什么高度开始img.height-100px，我不能从底部进行剪辑。或者我可以吗

解决方案： 它的工作原理如下：

<li>
 <div class="ui-btn-inner">
  <div class="ui-btn-text">
    <a>
     <img src="img/products/l/demo2.jpg">
     <h3>product2</h3>
    </a>
  </div>
 </div>
</li>

li a {
  position:absolute;
  bottom: 0;
  left: 0;
  }
li div.ui-btn-text {
 position: relative;
 height: 100px;
 overflow: hidden;
 }

---

不使用垂直对齐，但结果正常

那恐怕不行。增加显示：块；连接到您的链接，这将是您的方法的开始，但请检查结果：

垂直对齐：底部对齐；不会将a标签推到容器底部。以下是垂直对齐工作原理的指南：

为了解决您的问题，我会使用一些js解决方案，并在图像上添加一个负的上边距，如果它高于，例如，80px。下面是一个结果：

以及使用jQuery的代码：

$('img').each(function(){
    var height = $(this).height();
    if (height > 80) {
        $(this).css({marginTop: "-" + (height-80)});
    }
});

---

是的，恐怕jquery是唯一的方法。。。我也在尝试JSFIDLE。如果找不到解决方案，我会检查一下。谢谢你！使用pos:rel/pos:abs而不是垂直对齐获得它。如上所述，这是一个更好的解决方案：P我一开始尝试使用相对绝对定位，但我没有意识到必须将a定位在底部，这让我很聪明，所以它不起作用。。。如果您想：