开发者

Vertically align image in 960.gs div?

I am using 960.gs, and want to vertically align an IMG.开发者_JAVA技巧 My sense is that the IMG within the first DIV of grid_3 has no idea as to the height of the rest of the row (the div of grid_6 suffix_3). The image hugs the top...

Some constraints: I may not know the height of the image. I may not know the height of the content in the DIV to the right.

Without resorting to javascript, what's a good approach that wont break 960.gs? Is this where I go to a nested container, just so that I can vertically center an IMG? I have tried the css rule:

img {
    vertical-align: middle;
}

There's obviously more to it....

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>


You can give to the div a table-cell behavior with a vertical align:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜