Javascript 定心<；img>；垂直于桌子内侧<；td>；

我正在尝试将这些图像垂直居中放置在桌子内部，而不必编辑图片，使其大小相同。尝试了一些事情。。。我知道每当我想水平居中时，我都会使用

marginleft:auto；右边距：自动所以我想也许同样的方法也适用于这里，但有顶部和底部，但没有骰子

编辑：这里是另一个想法。。。是否可以设置一个javascript在页面打开时运行，以将所有文本跨距定位为该行中最低跨距的位置？
只是一个想法。。。让我知道你的想法

任何帮助都将不胜感激

这是小提琴：

提前感谢
CSS垂直对齐在所有浏览器中都是不同的-特别是如果您希望将文本保留在同一单元格中

我建议为图像创建一个固定高度的块，并使用垂直对齐hack使图像在该div内垂直居中（我知道，hack很糟糕）

JSFiddle：

垂直对齐hack：

相关CSS：

.valign {
    width: 100%;
    display: block;
    display: table;
    height: 100%;
    #position: relative;
    overflow: hidden;
}
.valign > span {
    display: block;
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.valign> span > span {
    display: block;
    #position: relative;
    #top: -50%;
}

#posiflex_directory td .image {
    height: 160px;
    display: block;
}

为了分离元素以更好地控制它们，我会采取不同的做法，即使我的不是干净的，是您的样本加上我在中通过的位的混合物：）


#posiflex_目录{
文本对齐：居中；
}
#posiflex_目录a{
颜色：继承；
位置：相对位置；
}
#posiflex_目录{
边框：实心1px；
}
#posiflex_目录{
宽度：215px；
身高：225px；
填充物：5px；
边框：实心1px；
}
#posiflex_目录跨度{
左：0；
右：0；
最高：100%；
底部：5px；
文字装饰：下划线；
字体大小：粗体；
}
img{
边框：实心1px；
}
瓦林纳先生{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.imgtext{
高度：40px；
}
您可以对该单元格使用
valign=“middle”
，但这取决于行的总体大小。@MahanGM不起作用。我必须在哪里放置
垂直对齐
？我认为表格单元格上的
垂直对齐
在这种情况下不起作用，因为环绕图像的
标记定义了表格单元格的高度。您必须将其应用于单元格标记：
。正如我所说，这取决于整个行的高度，如果没有足够的空间，那么就没有垂直对齐。我知道，如果我拿出
display:inline block
，它确实做到了这一点，但我的文本就乱七八糟了。有趣的回答，但我不太确定我是否想对此进行修改。希望有一个更简单的方法。。。在这一点上，我想我将需要创建相同大小的图像。。。愚蠢的mozilla用标题栏毁掉了一切。。。因此，我不得不将其更改为
display:inline block
，这会导致图像“粘”到顶部。因此我喜欢你的想法，但它可以做得更简单（你甚至不需要
垂直对齐
）。看我的小提琴：如果这是我最终要做的，我会给你检查。是否也可以创建一个Javascript在页面打开时运行，并将文本跨度设置为最低？因为它们是绝对定位的。
<table id="posiflex_directory">
    <tr class="theimgs">
    <td>
        <a href="../posiflex/tx_overview.aspx" id="posiTXIcon">
            <span class="valigner"></span>
            <img height="125" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/tx-4200.png" width="200"/>
        </a>
        </td>
        <td>
            <a href="../posiflex/cd_overview.aspx" id="posiCDIcon">
            <span class="valigner"></span>

          <img height="103" src="https://www.metsales.com/MetropolitanSales/microsite/posiflex/images/home_icons/CR6300.png" width="200"/>
            </a>
        </td>
    </tr>
    <tr>
        <td class="imgtext"><a href="../posiflex/tx_overview.aspx" id="posiTXIcon"><span>TX Fan-Free Series</span></a></td>
    <td class="imgtext"><a href="../posiflex/cd_overview.aspx" id="posiCDIcon"><span>Cash Drawers</span></a></td>
    </tr>
</table>



#posiflex_directory {
    text-align: center;
}

#posiflex_directory a {
    color: inherit;
    position: relative;
}

#posiflex_directory td {
    border: solid 1px;
}

#posiflex_directory .theimgs {
    width: 215px;
    height: 225px;
    padding: 5px;
    border: solid 1px;
}

#posiflex_directory span {
    left: 0;
    right: 0;
    top:100%;
    bottom: 5px;
    text-decoration: underline;
    font-weight: bold;
}

img {
    border: solid 1px;
}
.valigner {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imgtext{
    height:40px;
}