将产品图片放在盒子底部答案

【问题标题】：place product image at bottom of the box将产品图片放在盒子底部
【发布时间】：2015-03-04 00:26:56
【问题描述】：

我希望图像在框的底部对齐。会有来自后端的产品图片，并且没有固定尺寸。

HTML

<ul>
  <li><img src="http://img3.wikia.nocookie.net/__cb20120422063108/nickelodeon/images/2/27/Spongebob1.gif" alt="" /></li>
  <li>
    <img src="http://img2.wikia.nocookie.net/__cb20120717231330/hulksmash/images/7/78/Image_placeholder.jpg" alt="" />
  </li>
</ul>

CSS

ul {
  list-style: none;
}
li {
  float: left;
  width: 276px;
  text-align: center;
  border:1px solid #ccc;
  height: 276px;
  margin: 5px
}
img {
  vertical-align: bottom
}

【问题讨论】：

标签： html css image vertical-alignment

【解决方案1】：

这个 css 成功了

ul {
  list-style: none;
}
li {
  width: 276px;
  text-align: center;
  border:1px solid #ccc;
  height: 276px;
  margin: 5px
  vertical-align: bottom;
  display: table-cell;
  vertical-align: bottom;
}
img {
  vertical-align: bottom
}

【讨论】：

【解决方案2】：

这是一种方法。

li {
position:relative;
}

img {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translate(-50%, -100%); 
}

【讨论】：

img 比 top 更好的 css：bottom: 0;transform: translate(-50%, 0);

【解决方案3】：

您可以将line-height 属性添加到与 li 的高度相同的 li，它应该可以解决问题。

【讨论】：