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