Print Page - CSS question

Title: CSS question
Post by: emanuele on September 16, 2013, 05:47:43 am

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:

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?

/me hides

Title: Re: CSS question
Post by: TE on September 16, 2013, 06:24:50 am

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>

Title: Re: CSS question
Post by: Antechinus on September 16, 2013, 07:00:39 am

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

Title: Re: CSS question
Post by: TE on September 16, 2013, 07:24:47 am

Quote from: Antechinus – September 16, 2013, 07:00:39 amThat will centre it horizontally, but not vertically.

Ouch, yes :P Misread the post....

Title: Re: CSS question
Post by: emanuele on September 16, 2013, 07:46:29 am

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

Title: Re: CSS question
Post by: Bloc on September 16, 2013, 12:21:14 pm

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

Title: Re: CSS question
Post by: [SiNaN] on September 16, 2013, 12:56:11 pm

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;
}

Title: Re: CSS question
Post by: Antechinus on September 16, 2013, 05:41:23 pm

Quote from: Bloc – September 16, 2013, 12:21:14 pmYou 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.

Title: Re: CSS question
Post by: Xarcell on September 27, 2013, 06:07:42 am

Quote from: TE – September 16, 2013, 06:24:50 amNot 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] – September 16, 2013, 12:56:11 pmIf 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 – September 16, 2013, 12:21:14 pmYou 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.

Title: Re: CSS question
Post by: [SiNaN] on September 27, 2013, 06:43:02 am

Pardon me?

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
http://www.w3.org/TR/CSS21/text.html#propdef-text-align

Title: Re: CSS question
Post by: Xarcell on September 27, 2013, 07:10:53 am

Quote from: [SiNaN] – September 27, 2013, 06:43:02 amPardon me?

http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
http://www.w3.org/TR/CSS21/text.html#propdef-text-align

My mistake.

ElkArte Community

General => Chit Chat => Topic started by: emanuele on September 16, 2013, 05:47:43 am