Okay, you know I'm css dumb, so be nice with me. :P
<div class="something">
<div class="sub_something">
<img src="url" />
</div>
<div class="sub_something_else">
some text
</div>
</div>
sub_something is a square:
width: 250px;
height: 250px;
The image has max-wdith: 100%.
Is it possible to vertically align the image so that it is centered?
And if yes, how?
/me hides
Not sure what's the expected result..
An image with size 250px centered above the text? It's untested, but should hopefully do it :
<div style="width: 100%; margin: 0 auto; text-align: center;">
<img src="#" style="max-width: 250px; max-height:250px" />
</div>
That will centre it horizontally, but not vertically. Also, there's code there that does the same thing twice. The auto margin left and right will centre the image horizontally. So will using text-align: center;. You only need one or the other.
The best way to get the image centred vertically and horizontally, if you don't know the height of the image, is to set it as a background image with x and y set to 50%. If you know the height of the image and the height of the div it's easy (just pick whatever top padding works).
Ouch, yes :P Misread the post....
Thanks both! :D
mmm...I see.
I think I'll leave it the way it is now, otherwise I'd have to resize the background image too in css and that would cut out IE8 apparently... ::)
You could try a display: table-cell on the div, and good ol' vertical-align: middle on the image. Haven't tried it though and it works only on recent browsers(the table-cell).
If the image won't be larger than the container, this should be the easiest:
.sub_something
{
line-height: 250px;
}
.sub_something img
{
vertical-align: middle;
}
Should work on IE8. Didn't think of that.
Text-align: center works for inline or inline-block level elements, not block level elements,
Again, line-height is for inline or inline-block level elements, not block level elements.
This is the only proper way to do this, without setting it as a background image. As stated, only works in IE8+ and modern browsers.
Pardon me?
http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
http://www.w3.org/TR/CSS21/text.html#propdef-text-align