html - 如何在固定尺寸的 float 框中将未知尺寸的图像居中？

每行有三个固定尺寸的框（蓝色）(width: 299px, height: 307px)
在每个盒子里都有一个未知尺寸的图像（粉红色）。我只知道max-width: 262px和max-height: 200px。在图片下面有一些简短的两三行文字。我需要把图片放在文本上方的水平和垂直位置。
我将框设置为float:left，并将图像设置为position:absolute。我不知道现在该怎么做：(

最佳答案

最简单的方法是使用表显示，但这需要在标记中包含大量容器元素。如果文本高度也是固定的，我将使用here描述的“100%高度重影”技术。
适用于您的案例：

.box{
  text-align: center;
  position: relative;

  /* removes spaces between inline-block elements */
  /* another way is to add some negative margin on them */
  font-size: 0;

  /* account for text height */
  padding-bottom: 70px;

  /* +box width, height, float props etc. */
}

.box p{
  position: absolute;
  bottom: 10px;
  left: 5%;
  width: 90%;
  font-size: 14px;
}

/* the ghost, which forces vertical-align */
.box::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.box img {
  display: inline-block;
  vertical-align: middle;

  /* here you have to resize your images to fit within the box */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

标记：

<div class="box">
  <img ... />
  <p>  text... </p>
</div>

测试：http://cssdesk.com/MmrVV