将 <img> 垂直居中放在表格 <td> 内

Centering an <img> vertically inside of a table <td>

本文关键字：表格 td img 垂直居中      更新时间：2023-09-26

我正在尝试将这些图像垂直居中在表格内，而无需编辑图片以使它们大小相同。尝试了一些事情...我知道每当我想水平居中时，我都会使用 margin-left: auto; margin-right: auto; 所以我想也许同样适用于这里，但有顶部和底部，但没有骰子。

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

任何帮助将不胜感激。

这是小提琴：http://jsfiddle.net/58u4g/1/

提前致谢

CSS 垂直对齐方式在所有浏览器中都是不同的 - 特别是如果您想将文本保留在同一单元格中。

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

JSFiddle： http://jsfiddle.net/58u4g/8/

垂直对齐黑客：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

相关 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;
}
为了

分离元素以更好地控制它们，我会以不同的方式做，即使我的小提琴不干净，并且是你的样本加上我在:)通过的部分的混合

体 
<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;
}
相关文章：