如何在与图像高度无关的图像下正确定位文本

Question

无论图像大小如何，在图像下定位一组文本的最佳方法是什么？

例如，在下图中我有第一组图像和第二组图像。

http://imgur.com/uNGvMd7

第一组图像，字体文字位于图像的下方，但这取决于图像的高度。

第二组是我想要的样子 - 独立于图像高度，字体文本将始终位于所有图像的相同位置。

这是否需要JS脚本来确定图像的高度和位置？

提前致谢。

Answer 1

执行此操作的最佳方法是使用div和CSS 模拟表格布局。

无需任何内容的绝对高度即可实现。

See this demo.

HTML：

<div class="container">
    <div class="row">
        <div class="cell">
            <img src="http://dummyimage.com/200x300/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x200/000/fff" />
        </div>
        <div class="cell">
            <img src="http://dummyimage.com/200x100/000/fff" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
        <div class="cell">
            Text
        </div>
    </div>
</div>

CSS：

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 0 5px 10px;
    text-align: center;
}

.cell img {
    vertical-align: top;
}

编辑：有一些关于IE兼容性和响应能力的display:table布局的警告;看保罗的评论。

Answer 2

如果您知道各种图像的最大高度，则可以将每个图像包装在一个大小相同的块中，标题如下。这也允许一致的宽度。

HTML：

<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/100" />
  </div>
  <figcaption>one</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/100/75" />
  </div>
  <figcaption>two</figcaption>
</figure>
<figure>
  <div class="imgwrap">
    <img src="http://placekitten.com/50/50" />
  </div>
  <figcaption>three</figcaption>
</figure>

CSS：

figure {
  display: inline-block;
}

.imgwrap {
  height: 100px;
  width: 100px;
}

figcaption {
  text-align: center;
}

一个工作示例：http://codepen.io/paulroub/pen/auLcA