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;
}
精彩评论