Вертикально выровнять изображение в 960.gs div?

Question

Я использую 960.gs и хочу выровнять IMG по вертикали. Я чувствую, что IMG в первом DIV grid_3 не имеет представления о высоте остаток строки (div grid_6 суффикс_3). Изображение обнимает верх ...

Некоторые ограничения: возможно, я не знаю высоту изображения. Я могу не знать высота содержимого в 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;
}