By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,919 Members | 1,587 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,919 IT Pros & Developers. It's quick & easy.

vertical alignment of image

P: n/a
Hi

Is it possible to vertically align an image in the middle of a DIV of fixed height?
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
[limited to .stylesheets]

In article abracad wrote:
Hi

Is it possible to vertically align an image in the middle of a
DIV of fixed height?


Yes.

div {height:100px;line-height:100px;vertical-align:middle;}

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

P: n/a
Lauri Raittila wrote:
[limited to .stylesheets]

In article abracad wrote:
Hi

Is it possible to vertically align an image in the middle of a
DIV of fixed height?


Yes.

div {height:100px;line-height:100px;vertical-align:middle;}


Hi
I tested that in IE6, Mozilla 1.4 and Opera 7.23 and it doesn't seem to work
in any of them. The image is placed top left!
http://p0c79.phpwebhosting.com/~p0c7...ertmiddle.html
David
Jul 20 '05 #3

P: n/a
*David Graham*:
Lauri Raittila wrote:
In article abracad wrote:

Is it possible to vertically align an image in the middle of a
DIV of fixed height?


div {height:100px;line-height:100px;vertical-align:middle;}


I tested that in IE6, Mozilla 1.4 and Opera 7.23 and it doesn't seem to work


Good, it shouldn't. 'vertical-align' only applies to inline-level and
'table-cell' elements (of which 'div' by default is none) and is no
inherited.

div {height: 100px; line-height: 100px;}
div > img {vertical-align: middle;}

should work. For compatibility reasons you probably want to use a different
selector than "div > img".

--
The Hitchhiker's Guide to the Galaxy: "To summarize: It is a well-known fact
that those people who must want to rule people are, ipso facto, those least
suited to do it. To summarize the summary: Anyone capable of getting themselves
made President should by no means be allowed to do the job. To summarize the
summary of the summary: People are a problem."
Jul 20 '05 #4

P: n/a
Christoph Paeper wrote:
*David Graham*:
Lauri Raittila wrote:
In article abracad wrote:

Is it possible to vertically align an image in the middle of a
DIV of fixed height?

div {height:100px;line-height:100px;vertical-align:middle;}


I tested that in IE6, Mozilla 1.4 and Opera 7.23 and it doesn't seem to
work


Good, it shouldn't. 'vertical-align' only applies to inline-level and
'table-cell' elements (of which 'div' by default is none) and is no
inherited.

div {height: 100px; line-height: 100px;}
div > img {vertical-align: middle;}

should work. For compatibility reasons you probably want to use a
different selector than "div > img".


OK - works in Mozilla but not in Opera (also not in IE even after removing
the child selector which IE does not support)
Is the failure related to an image being a replaced inline element and not
just an inline element i.e. does vertical-align apply to replaced inline
elements?
David
Jul 20 '05 #5

P: n/a
In article David Graham wrote:
Christoph Paeper wrote:
*David Graham*:
Lauri Raittila wrote:
In article abracad wrote:
>
> Is it possible to vertically align an image in the middle of a
> DIV of fixed height?

div {height:100px;line-height:100px;vertical-align:middle;}

I tested that in IE6, Mozilla 1.4 and Opera 7.23 and it doesn't seem to
work
Good, it shouldn't. 'vertical-align' only applies to inline-level and
'table-cell' elements (of which 'div' by default is none) and is no
inherited.

div {height: 100px; line-height: 100px;}
div > img {vertical-align: middle;}

should work. For compatibility reasons you probably want to use a
different selector than "div > img".


OK - works in Mozilla but not in Opera (also not in IE even after removing
the child selector which IE does not support)


Opera seems to have bug, even if I think this has worked before. You can
work around it using display:table-cell;vertical-align:middle for div
(notice that width might change), or having &nbsp; before or after image.
Is the failure related to an image being a replaced inline element and not
just an inline element
Yes, as it works when there is other inline content.
i.e. does vertical-align apply to replaced inline elements?


Should.
http://www.w3.org/TR/CSS2/visudet.ht...vertical-align

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6

P: n/a
Lauri Raittila wrote:
In article David Graham wrote:
Christoph Paeper wrote:
*David Graham*:
Lauri Raittila wrote:
> In article abracad wrote:
>>
>> Is it possible to vertically align an image in the middle of a
>> DIV of fixed height?
>
> div {height:100px;line-height:100px;vertical-align:middle;}

I tested that in IE6, Mozilla 1.4 and Opera 7.23 and it doesn't seem to
work

Good, it shouldn't. 'vertical-align' only applies to inline-level and
'table-cell' elements (of which 'div' by default is none) and is no
inherited.

div {height: 100px; line-height: 100px;}
div > img {vertical-align: middle;}

should work. For compatibility reasons you probably want to use a
different selector than "div > img".


OK - works in Mozilla but not in Opera (also not in IE even after
removing the child selector which IE does not support)


Opera seems to have bug, even if I think this has worked before. You can
work around it using display:table-cell;vertical-align:middle for div
(notice that width might change), or having &nbsp; before or after image.
Is the failure related to an image being a replaced inline element and
not just an inline element


Yes, as it works when there is other inline content.
i.e. does vertical-align apply to replaced inline elements?


Should.
http://www.w3.org/TR/CSS2/visudet.ht...vertical-align


Well, after careful reading of the rules, the best I can do with this
vertical-align property is to have the inline element position itself
relative to text in the parent element. See
http://p0c79.phpwebhosting.com/~p0c7...ertmiddle.html
I have commented out a span element but that behaved exactly like the image.
The vertical-align propertry doesn't seem to be any good for positioning
relative to the parent, rather it positions inline elements relative to
parent elements fonts baseline. Works cross browser (Opera 7.23, Mozilla 1.4
and IE6)

David
Jul 20 '05 #7

P: n/a
In article David Graham wrote:
Should.
http://www.w3.org/TR/CSS2/visudet.ht...vertical-align
Well, after careful reading of the rules, the best I can do with this
vertical-align property is to have the inline element position itself
relative to text in the parent element.

I have commented out a span element but that behaved exactly like the image.
The vertical-align propertry doesn't seem to be any good for positioning
relative to the parent, rather it positions inline elements relative to
parent elements fonts baseline. Works cross browser (Opera 7.23, Mozilla 1.4
and IE6)


Exactly. That's why line-height for div is important
div {border:3px solid red; height:10em;line-height:10em;}
img {vertical-align: middle;}

http://p0c79.phpwebhosting.com/~p0c7...ertmiddle.html
(replace CSS on that page with)

It's unfortunate if this don't work on IE, as neither do any of other
methods, at least not well.

If you can use same unit for both image and div, of course you can do,
and should do this:

div {border:3px solid red;height:100px;}
img {margin:25px auto;} /* img is 50px tall*/

Yes. But when you use div with height and line-height of 100px, you are
positioning inline element relative to to line box.

Anyway, you can do vertical centering differently as well:

div {border:3px solid red; height:10em;position:relative;min-height:50px}
img {position:absolute;top:0;bottom:0;margin:auto;heig ht:50px;}

This works at least on Opera 7.22, IIRC also O6 and m1+, IIRC don't fail
badly on IE (does fail though). Problem: if 10em < 50px IE don't like it.
(find height algorithm for absolutely positioned elemenst in spec)

div {border:3px solid red; height:10em;display:table;
vertical-align:middle;width:100%;}

This 'works' on Opera 7.23, but is debatable if vertical-align should
apply, as it is not table-cell, and vertical align is not inherited.
(There is anonymous table-cell element created.)

div {border:3px solid red; height:10em;display:table-cell;vertical-
align:middle;}

Works and it should work, as vertical-align aplies to table-cell and
behaves differently when used for table-cell. Problem is that you can't
now specify width for div, as it is undefined, IIANM. OTOH, you can just
but it in another div and say display:table for outer div.

Neither display:table nor display:table-cell works for IE.

div {border:3px solid red;height:10em;min-height:50px !important;}
img {position:relative;top:50%;margin-top:-25px;}

This works best maybe best across browsers, but can have very bad side
effects, like part of image outside canvas.

Hm. I think that there is no other ways to vertically center, of course
you can do them bit differently too.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #8

P: n/a
Lauri Raittila wrote:
In article David Graham wrote:
Should.
http://www.w3.org/TR/CSS2/visudet.ht...vertical-align


Well, after careful reading of the rules, the best I can do with this
vertical-align property is to have the inline element position itself
relative to text in the parent element.

I have commented out a span element but that behaved exactly like the
image. The vertical-align propertry doesn't seem to be any good for
positioning relative to the parent, rather it positions inline elements
relative to parent elements fonts baseline. Works cross browser (Opera
7.23, Mozilla 1.4 and IE6)


Exactly. That's why line-height for div is important
div {border:3px solid red; height:10em;line-height:10em;}
img {vertical-align: middle;}

http://p0c79.phpwebhosting.com/~p0c7...ertmiddle.html
(replace CSS on that page with)

It's unfortunate if this don't work on IE, as neither do any of other
methods, at least not well.

I made the changes as you suggested and it works well in Mozilla and Opera
but guess what - IE6 refuses to play ball

Thanks for all the other suggestions - I am playing around with them now

David

Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.