0

I am using 960.gs, and want to vertically align an IMG. 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>
Daniel Smith
  • 535
  • 1
  • 5
  • 10
  • AFAIK vertically aligning images using CSS is non-trivial. However, its is independent of 960gs. You can try something along the lines of http://www.brunildo.org/test/img_center.html and see that works out. – Sukumar Jul 11 '11 at 13:50

1 Answers1

3

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

.grid_3 {
    display: table-cell;
    vertical-align: middle;
}
jjj
  • 965
  • 8
  • 23