如何在固定尺寸的浮动框中居中未知尺寸的图像？

Question

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

我将框设置为float:left，然后设置图片position:absolute。我现在不知道如何让它发挥作用:(

Answer 1

最简单的方法是使用表格显示，但这需要标记中的大量容器元素。如果文本高度也是固定的，我会使用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

Answer 2

.image-class {
      display: inline-block;
}

.image-container-div {
      text-align: center;
}

可以浮动容器..但可能不适合浮动图像类。

您还可以将图像和文本放在单独的容器div中，以避免文本移位。