centering an image
in [CSS]
|
Prev: Which (current) browsers do NOT support <iframes> ?
Next: Pseudoclass link doesen't work in Firefox 3
From: jeff on 10 Jan 2010 00:03 dorayme wrote: Hello Dorayme! > In article <hi9t2l$ac2$1(a)news.albasani.net>, jeff <jeff_thies(a)att.net> > wrote: > >> I'd like to center an image in a container, both vertically and >> horizontally. >> >> The below works in FF3 and Safari3. It does not vertical-align in IE6 >> (I don't have IE7 here at the moment). >> >> Is there a more elegant way of doing this, and does this work in IE7? >> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" >> "http://www.w3.org/TR/html4/strict.dtd"> >> >> <style type="text/css"> >> #container{ >> height: 600px; >> width: 600px; >> border: 1px solid red; >> display: table-cell; >> vertical-align: middle; >> } >> >> #container img{ >> display: block; >> margin: auto; >> } >> </style> >> >> <div id="container"> >> <img src="test_1.jpg"> >> </div> > > No, IE6 does not do table-cell even when it is in working hours. Gus says IE7 doesn't either. > > Yours seems elegant enough to me - in abstract. Perhaps the context > would make it seem otherwise? > > I had something on one alternative you might be interested to see at > > <http://netweaver.com.au/centring/> > > a couple of pages into it... Page 3 looks like Gus's idea. I'm writing another javascript slideshow. My original thought was to do a centered background image, then I drifted from that, perhaps I'll drift back. <div id="wrapper"> <div id="image_1"></div> <div id="image_2"></div> </div> styled like: #wrapper{ position: relative; } #image_1{ position: absolute; left: 0px; top: 0px; background-position: center; background-image: url('pic_1.jpg'); } #image_2{ position: absolute; left: 0px; top: 0px; background-position: center; background-image: url('pic_2.jpg'); } Fades are easy to do and may be sufficient. Background image sizing appears to not be supported well, if at all. I've seen some transitions that combined with a fade seem quite nice. The fade seems to be the key as the transitions without seem garish. Jeff >
From: Gus Richter on 10 Jan 2010 07:55 On 1/9/2010 11:22 PM, jeff wrote: > > I don't have it's [the images'] exact dimension. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> #container{ height: 600px; width: 600px; line-height:600px; border: 1px solid red; text-align:center; } #container img{ vertical-align:middle; } </style> <div id="container"> <img src="test_1.jpg"> </div>
From: jeff on 10 Jan 2010 10:32 Gus Richter wrote: > On 1/9/2010 11:22 PM, jeff wrote: >> >> I don't have it's [the images'] exact dimension. > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> > > <style type="text/css"> > #container{ > height: 600px; > width: 600px; > line-height:600px; > border: 1px solid red; > text-align:center; > } > > #container img{ > vertical-align:middle; > } > </style> > > <div id="container"> > <img src="test_1.jpg"> > </div> I like this. The line-height seems to be the key. Do you know if this works in IE7, as it does not in IE6? The useabilty chart here: http://www.student.oulu.fi/~laurirai/www/css/middle/ is a bit outdated as it dates back to 2005! I keep IE7 on my laptop which I've been without... Thanks for your time and help. I think have enough to get the job done and have a graceful degradation, lack of vertical centering is just aesthetics after all. Jeff >
From: dorayme on 10 Jan 2010 16:20 In article <hicrua$2fi$1(a)news.albasani.net>, jeff <jeff_thies(a)att.net> wrote: > Gus Richter wrote: > > On 1/9/2010 11:22 PM, jeff wrote: > >> > >> I don't have it's [the images'] exact dimension. > > > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > > "http://www.w3.org/TR/html4/strict.dtd"> > > > > <style type="text/css"> > > #container{ > > height: 600px; > > width: 600px; > > line-height:600px; > > border: 1px solid red; > > text-align:center; > > } > > > > #container img{ > > vertical-align:middle; > > } > > </style> > > > > <div id="container"> > > <img src="test_1.jpg"> > > </div> > > I like this. The line-height seems to be the key. > > Do you know if this works in IE7, It does not work in any browsers at all. But it is a sort of nice idea. -- dorayme
From: Gus Richter on 14 Jan 2010 09:37
On 1/10/2010 4:20 PM, dorayme wrote: > In article<hicrua$2fi$1(a)news.albasani.net>, jeff<jeff_thies(a)att.net> > wrote: > >> Gus Richter wrote: >>> On 1/9/2010 11:22 PM, jeff wrote: >>>> >>>> I don't have it's [the images'] exact dimension. >>> >>> >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" >>> "http://www.w3.org/TR/html4/strict.dtd"> >>> >>> <style type="text/css"> >>> #container{ >>> height: 600px; >>> width: 600px; >>> line-height:600px; >>> border: 1px solid red; >>> text-align:center; >>> } >>> >>> #container img{ >>> vertical-align:middle; >>> } >>> </style> >>> >>> <div id="container"> >>> <img src="test_1.jpg"> >>> </div> >> >> I like this. The line-height seems to be the key. >> >> Do you know if this works in IE7, > > It does not work in any browsers at all. But it is a sort of nice idea. It was using Jeff's markup with Jeff's image, for Jeff. Perhaps if you tried to use your own image in place of Jeff's test_1.jpg image. I did. I used it only to demonstrate another method from Laurie's web page. IE does not handle it (vertical-align) well as it stands, but there are fixes out there. See: <http://www.google.ca/search?client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&channel=s&hl=en&source=hp&q=IE+vertical-align&meta=lr%3D&btnG=Google+Search> P.S. If I may suggest, please ask a question next time instead of using a definite statement. P.P.S. Doesn't anyone else have a clue to allow you to make such a statement and leave it unchallenged? Perhaps they are afraid to hear another of your amusing anecdotes? -- Gus |