Question

我试图将这些图像垂直居中放在桌面内，而不必编辑图片，使它们的大小相同。尝试了一些事情......我知道无论什么时候我想要横向居中，我都会使用margin-left: auto; margin-right: auto;所以我想也许同样适用于这里，但有顶部和底部，但没有骰子。

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

非常感谢任何帮助。

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

提前致谢

Answer 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;
}

Answer 2

为了分离元素以更好地控制它们，我会做不同的事情，即使我的fiddle不干净并且是你的样本的混合加上我通过的位：）

<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;
}

将<img/>垂直居中放置在表格内部

2 个答案: