centering an image
in [CSS]
|
Prev: Which (current) browsers do NOT support <iframes> ?
Next: Pseudoclass link doesen't work in Firefox 3
From: dorayme on 14 Jan 2010 17:40 In article <hina79$cel$1(a)news.eternal-september.org>, Gus Richter <gusrichter(a)netscape.net> wrote: > 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%3Aoffici > al&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? Sorry Gus, just thought it would make the last few readers who bother with anything I say test it further and see for themselves or ask further. But it *was* rude of me and I apologise. I mean this last. I make a URL below as penance. It does not depend on the image. The vertical centring breaks down as soon as a user changes his text size after loading the page. Try it: <http://dorayme.netweaver.com.au/alt/imgCentreProposal.html> -- dorayme
From: Bill Braun on 14 Jan 2010 17:53 dorayme wrote: > <http://dorayme.netweaver.com.au/alt/imgCentreProposal.html> Be still my heart, it is beautiful. Can I keep it? Bill B
From: Gus Richter on 14 Jan 2010 18:39 On 1/14/2010 5:40 PM, dorayme wrote: > The vertical centring breaks down as > soon as a user changes his text size after loading the page. Try it: > > <http://dorayme.netweaver.com.au/alt/imgCentreProposal.html> First of all, I don't want to be placed into a position of championing the vertical-align method. I prefer my first method, but only provided this as an alternative because the OP said that he would not have image dimensions available in his live scenario. Centering in IE6 and IE7 (although I don't have 7 available here, I believe I'm right) by the vertical-align method does not work without some extra help as I mentioned with the link provided. IE8, Firefox, Chrome, Opera and Safari all handle the vertical-align method perfectly for my example and for your imgCentreProposal page. This includes Sizing the page up or down (+/-). All of those browsers use the same method now of +/- sizing causing sizing change to the text as well as the images simultaneously (zoom all). Since I believe that the user has only this functionality available, not an individual text-only size change and that I don't know how to do individual text-only size change without doing some heavy research anyway, nor caring how to accomplish that with my browsers, I will leave it up to you to tell me exactly how you can make your test page break since I'm unable to accomplish this "text size change" you mention in order to cause the breakage. -- Gus
From: dorayme on 14 Jan 2010 20:40 In article <hio9up$4qd$1(a)news.eternal-september.org>, Gus Richter <gusrichter(a)netscape.net> wrote: > On 1/14/2010 5:40 PM, dorayme wrote: > > > The vertical centring breaks down as > > soon as a user changes his text size after loading the page. Try it: > > > > <http://dorayme.netweaver.com.au/alt/imgCentreProposal.html> > > First of all, I don't want to be placed into a position of championing > the vertical-align method. I prefer my first method, but only provided > this as an alternative because the OP said that he would not have image > dimensions available in his live scenario. > I have not been implying that your motives have not been sound. I have been only saying that it is not a good idea because enough people out there have browsers and browsers set not to make this a reliable method. Also, I can't see how the size of the image is relevant? > IE8, Firefox, Chrome, Opera and Safari all handle the vertical-align > method perfectly for my example and for your imgCentreProposal page. > This includes Sizing the page up or down (+/-). > Not in my Safari, iCab, or FF latest. But latter does have a control on this: <http://dorayme.netweaver.com.au/justPics/forgus.png> > All of those browsers use the same method now of +/- sizing causing > sizing change to the text as well as the images simultaneously (zoom > all). Since I believe that the user has only this functionality > available, not an individual text-only size change and that I don't know > how to do individual text-only size change without doing some heavy > research anyway, nor caring how to accomplish that with my browsers, I > will leave it up to you to tell me exactly how you can make your test > page break since I'm unable to accomplish this "text size change" you > mention in order to cause the breakage. I would be the last being to help on Windows applications. I am too one eyed and emotional and biased. <g> -- dorayme
From: Gus Richter on 14 Jan 2010 23:41
On 1/14/2010 8:40 PM, dorayme wrote: > In article<hio9up$4qd$1(a)news.eternal-september.org>, > Gus Richter<gusrichter(a)netscape.net> wrote: > >> On 1/14/2010 5:40 PM, dorayme wrote: >> >>> The vertical centring breaks down as >>> soon as a user changes his text size after loading the page. Try it: >>> >>> <http://dorayme.netweaver.com.au/alt/imgCentreProposal.html> >> >> First of all, I don't want to be placed into a position of championing >> the vertical-align method. I prefer my first method, but only provided >> this as an alternative because the OP said that he would not have image >> dimensions available in his live scenario. >> > > I have not been implying that your motives have not been sound. I have > been only saying that it is not a good idea because enough people out > there have browsers and browsers set not to make this a reliable method. Anyone (user or developer) that has used Zoom "for text-only" knows full well that the whole page is going to break in the majority of cases when images are used, which is most of the time. That is why Firefox, for example, added the whole-page zoom feature from previously having only text-only zoom. Text-only zoom is evil since most pages will break with it and this evil feature is NOT provided in Opera, Chrome or in IE8. It may only be available for historical reasons in those browsers that still have it. There is NO reason to test any page with text-only zoom if the page contains an image, since the probability of breakage is very high, therefore, a page breakage due to text-only zoom usage is inconsequential. Everyone, (user and developer) should use whole-page zoom for all their zooming needs. > Also, I can't see how the size of the image is relevant? For my first example, image dimensions must be known in order to reposition the image using margin properties. The OP said that he would not have image dimensions available in his case. I then presented this alternate method, where image dimensions are not required, for his consideration. >> IE8, Firefox, Chrome, Opera and Safari all handle the vertical-align >> method perfectly for my example and for your imgCentreProposal page. >> This includes Sizing the page up or down (+/-). >> > > Not in my Safari, iCab, or FF latest. But latter does have a control on > this: > > <http://dorayme.netweaver.com.au/justPics/forgus.png> Since in my opinion, nobody should use text-only zoom, I therefore do not use it and had put it out of my mind. After seeing your "forgus" image, I went and found that Firefox and Safari (iCab having the same rendering engine as Safari will be the same as Safari) have the evil feature, whereas Opera, IE8 and Chrome do not. It's interesting that although Chrome also uses the WebKit engine, they chose not to offer the evil feature on their UI. >> All of those browsers use the same method now of +/- sizing causing >> sizing change to the text as well as the images simultaneously (zoom >> all). Since I believe that the user has only this functionality >> available, not an individual text-only size change and that I don't know >> how to do individual text-only size change without doing some heavy >> research anyway, nor caring how to accomplish that with my browsers, I >> will leave it up to you to tell me exactly how you can make your test >> page break since I'm unable to accomplish this "text size change" you >> mention in order to cause the breakage. > > I would be the last being to help on Windows applications. I am too one > eyed and emotional and biased.<g> As I mentioned/hinted above, your "forgus" image showed me how you did it. -- Gus |