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