1

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

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

任何帮助将非常感激。

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

提前致谢

4

2 回答 2

1

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

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

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;
}
于 2013-11-13T22:06:26.933 回答
1

为了分离元素以便更好地控制它们，我会做不同的事情，即使我的小提琴不干净并且是你的样品的捣碎加上我通过的位:)

<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;
}
于 2013-11-13T23:20:42.303 回答