Skip to main content ↑ ↓
Topic: CSS question (Read 7151 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

CSS question

Okay, you know I'm css dumb, so be nice with me. :P

Code: [Select]
<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:
Code: [Select]
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?

 emanuele hides
Bugs creator.
Features destroyer.
Template killer.

Re: CSS question

Reply #1 –

Not sure what's the expected result..

An image with size 250px centered above the text? It's untested, but should hopefully do it :
Code: [Select]
<div style="width: 100%; margin: 0 auto; text-align: center;">
    <img src="#" style="max-width: 250px; max-height:250px" />
</div>
Thorsten "TE" Eurich
------------------------

Re: CSS question

Reply #2 –

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).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS question

Reply #3 –

Quote from: Antechinus – That will centre it horizontally, but not vertically.
Ouch, yes :P Misread the post....
Thorsten "TE" Eurich
------------------------

Re: CSS question

Reply #4 –

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... ::)
Bugs creator.
Features destroyer.
Template killer.

Re: CSS question

Reply #5 –

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).

Re: CSS question

Reply #6 –

If the image won't be larger than the container, this should be the easiest:

Code: [Select]
.sub_something
{
	line-height: 250px;
}
.sub_something img
{
	vertical-align: middle;
}

Re: CSS question

Reply #7 –


Quote from: Bloc – 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).

Should work on IE8. Didn't think of that.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS question

Reply #8 –

Quote from: TE – Not sure what's the expected result..

An image with size 250px centered above the text? It's untested, but should hopefully do it :
Code: [Select]
<div style="width: 100%; margin: 0 auto; text-align: center;">
    <img src="#" style="max-width: 250px; max-height:250px" />
</div>

Text-align: center works for inline or inline-block level elements, not block level elements,


Quote from: [SiNaN] – If the image won't be larger than the container, this should be the easiest:

Code: [Select]
.sub_something
{
	line-height: 250px;
}
.sub_something img
{
	vertical-align: middle;
}

Again, line-height is for inline or inline-block level elements, not block level elements.


Quote from: Bloc – 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).


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.