Question

我的模板：

<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>
<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>
<td class="image">
    <img src="">
    <div class="align-bottom">
        text
    </div>
</td>

如何垂直 - 中间对齐图像（图像具有不同的尺寸......）和垂直底部对齐文本（不同尺寸。）

td高度是动态的。

我很抱歉，position:absolute不起作用... 图片大小不同。

Answer 1

您可以做的是在表格中有2行。第1行包含所有图像，第2行包含文本

为每个图像添加

img {    
  margin:auto;
}

和文字，对齐：中心。

我认为应该做这件事。

使用此结构：http://jsfiddle.net/vse8cq5y/

Answer 2

根据您提供的HTML和请求，我假设您需要获得所需内容。

图像应该自动执行您要求的操作，您需要做的就是将文本绝对定位到td的底部。

通过在每个td中添加填充底部，您可以留出文本空间，这意味着它永远不会与您的图像重叠（无论图像大小如何）。

img {
  background-color: red;
  display: block;
  width:5em;
  height:2em;
  margin: 0 auto;
}

td {
  width:10em;
  padding-bottom: 1em;
  position: relative;
  vertical-align: middle; /*should be default*/
}
.container {
  background-color: blue;
  display:inline-block;
}

.align-bottom {
  position: absolute;
  bottom: 0;
  left:0;
  display: inline;
  width: 100%;
  text-align: center;
}

<table>
<tr>
<td class="image">
        <img src="" style="height: 4em">
        <div class="align-bottom">
            text
        </div>
</td>
    <td class="image">
        <img src="" style="height: 7em">
        <div class="align-bottom">
            text
        </div>
</td>
<td class="image">
        <img src="" style="height: 10em">
        <div class="align-bottom">
            text
        </div>
</td>
</tr>
</table>

垂直对齐图像+底部文本

2 个答案: