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 9 Jan 2010 07:33 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>
From: dorayme on 9 Jan 2010 15:03 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. 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... -- dorayme
From: Gus Richter on 9 Jan 2010 22:18 On 1/9/2010 7:33 AM, jeff wrote: > I'd like to center an image in a container, both vertically and > horizontally. [snip] > Is there a more elegant way of doing this, and does this work in IE7? [snip] <!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; } #container img{ border:1px solid; width:86px;height:84px; /* values to take 1/2 of below */ position:relative; /* allows positioning inside container */ left:50%; /* pos left edge of image to center */ margin-left:-43px; /* height/2 moves left & centers image */ top:50%; /* pos top edge of image to center */ margin-top:-42px; /* width/2 moves up & centers image */ } </style> <div id="container"> <img src="test_1.jpg"> </div> This works elegantly since it works in all browsers.<br> (display:table-cell is not supported in IE 6 or 7)
From: jeff on 9 Jan 2010 23:22 Gus Richter wrote: > On 1/9/2010 7:33 AM, jeff wrote: >> I'd like to center an image in a container, both vertically and >> horizontally. > > [snip] > >> Is there a more elegant way of doing this, and does this work in IE7? > > [snip] > > <!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; > } > > #container img{ border:1px solid; > width:86px;height:84px; /* values to take 1/2 of below */ > position:relative; /* allows positioning inside container */ > left:50%; /* pos left edge of image to center */ > margin-left:-43px; /* height/2 moves left & centers image */ > top:50%; /* pos top edge of image to center */ > margin-top:-42px; /* width/2 moves up & centers image */ > } > </style> > > <div id="container"> > <img src="test_1.jpg"> > </div> > > This works elegantly since it works in all browsers.<br> > (display:table-cell is not supported in IE 6 or 7) > Thanks, It hadn't occurred to me that you could mix position: relative with a margin. I'll keep this in mind although I'm unsure if I'll use it in the project at hand because although I have the image(s) aspect stored, I don't have it's exact dimension. Still, it's a nice "trick" that works in IE7 as well as IE6 and it may be worth the server call. Jeff
From: Gus Richter on 9 Jan 2010 23:32
On 1/9/2010 11:22 PM, jeff wrote: [snip] > Thanks, It hadn't occurred to me that you could mix position: relative > with a margin. I'll keep this in mind although I'm unsure if I'll use it > in the project at hand because although I have the image(s) aspect > stored, I don't have it's exact dimension. Still, it's a nice "trick" > that works in IE7 as well as IE6 and it may be worth the server call. OK then. Go and check out other options: <http://www.student.oulu.fi/~laurirai/www/css/middle/> -- Gus |