css - 在 960.gs div 中垂直对齐图像？

Question

我正在使用 960.gs，并且想要垂直对齐 IMG。我的感觉是 grid_3 的第一个 DIV 中的 IMG 不知道 行的其余部分(grid_6 suffix_3 的 div)。图像拥抱顶部...

一些限制:我可能不知道图像的高度。我可能不知道 右侧 DIV 中内容的高度。

在不借助 javascript 的情况下，有什么好的方法不会破坏 960.gs？ 这是我去嵌套容器的地方吗，这样我就可以垂直居中 IMG？我试过 css 规则:

img {
    vertical-align: middle;
}

显然还有更多......

Snippet...

    <div class="container_12">
            <div class="grid_3">
                    <img src="images/dlsmug5.png">
            </div>

            <div class="grid_6 suffix_3">
    <h1>My Title - etc...</h1>
    <p>
               Heya, revamp time!  It may not be obvious, but...,
               I am coming up to speed with the CSS framework
               of <a href="http://960.gs">The 960 Grid System</a> ..
    </p>
            </div>

            <div class="clear"></div>

Answer 1

您可以为 div 提供垂直对齐的表格单元格行为:

.grid_3 {
    display: table-cell;
    vertical-align: middle;
}