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