将图像定位在单元格顶部和单元格底部

Question

我正在创建一个连接的示意图树。 我使用表来创建它。 第一个单元格包含一个面板。该面板中有颜色和数字。在面板的右侧，在中间我有一条 15px 宽度的水平线。 下一个单元格也是一个类似上面的面板，但这个单元格的左侧也有一条 15 像素宽的水平线。 下一行在第二个单元格中有一个类似的面板。

     ********        ********
-----*      *--------*      *
     ********        ********
                     ********
                 ----*      *
                     ********

现在我希望将第二行垂直连接到上面的行：

     ********        ********
-----*      *--------*      *
     ********    |   ********
                 |   ********
                 ----*      *
                     ********

我想用一个额外的列来做到这一点，我给出了黑色和 2px 宽的 background-color。 它看起来几乎很棒，但在顶部和底部我不想看到大约 10px 的线。 我想在这里放一些小图片，只是一个白色的块来越界。

问题：如何将两张图片放在一个表格单元格中，一张在单元格顶部，一张在单元格底部？

我用 css 试过这个：

.imT {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 2px;
  float: left;
  display: block;
  vertical-align: top;
}

.imB {
    position: relative;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 2px;
    float: left;
    display: block;
    vertical-align: bottom;
}

欢迎提出任何建议。

Answer 1

vertical-align 不适用于块级元素。因此您需要设置display: inline-block; 并删除float:left;：

.imT {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 2px;
  display: inline-block;
  vertical-align: top;
}

.imB {
    position: relative;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 2px;
    display: inline-block;
    vertical-align: bottom;
}

或者，您可以使用 display: table-cell; 代替 inline-block。