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

Question

在每一行中，我有三个固定尺寸的框(蓝色)(宽度:299px，高度:307px)在每个盒子里都有一个未知尺寸的图像(粉红色)。我只知道 max-width: 262px 和 max-height: 200px。在图像下方有一些简短的两三行文字。我需要将图像水平和垂直居中放置在文本上方的空间中。

我将框设置为 float:left 并将图像设置为 position:absolute。我现在不知道如何让它工作:(

Answer 1

最简单的方法是使用表格显示，但这需要在标记中使用大量容器元素。如果文本高度也是固定的，我会采用描述的“100% 高度重影”技术 here .

适用于您的情况:

.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