chadmichael Posted March 2, 2007 Share Posted March 2, 2007 I'm trying to center an image in a containing div. I'm using a vertical centering technique that I have found on the internet, and have used successfully in the past. In the past, however, I have applying this technique to situations where I'm centering an image in a know, fixed size containing element, such as a div with the height and width set. In this present case, I don't want to se the width of the containing div becauuse I want it to be width=100%, i.e. as wide as the space available to it. But this presents problems for my centering techniques.The vertical centering I'm using is the one that uses a font declaration to provide the basis for vertical centering on IE. This includes a style that setst he containing elements display to table-cell. It seems like the is style makes the width=100% not work on Firefox -- I suppose its working correctly, just not as would be most convenient for me in this case I've provided a code sample below. Please check it out. Note, provide your own image please. Note, I've set the width of the containing div to a fixed 800 pixels so you can see that the centering actually works. What I would like to do is make that have a width of 100%, but, if you try it you can see, it doesn't work. The containing div collapses to the size of the image, same result if I set width to auto. How can I get the containing div to have a width of 100%?Do I need to abandon this centering technique? Is there a whacky hack? <html> <head> <style type="text/css"> #container { background-color: lightgrey; } .centeringDiv{ background-color:lightgreen; height: 470px; /* I NEED width to be the full width of the containing div, which in this test case is the width of the browser view port, but if I set width=100% the div collapses to the width of the image, due to the display style used for the centering, I think. Actually, width at auto or 100% works on IE but on firefox the div collapses. */ width: 800px; /* width: 100%; */ /* CENTERING STUFF */ text-align: center; /* these two lines provide the vertical centering for standards based browsers */ display: table-cell; vertical-align: middle; /* this font declaration is necessary for the IE fix. While there won't be any actual text in this page, the vertical alignment for IE is based upon the center line of the defined font family, I think;) */ font:420px Arial, Helvetica, sans-serif; } </style> </head> <body> <div id="container" > <div class="centeringDiv"> <img src="v10.jpg"/> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
croatiankid Posted March 2, 2007 Share Posted March 2, 2007 You're supposed to center block level elements, like DIV, with margin:0 auto;, not text-align. also, to be able to do it, you must have a width specified. Now I'm not sure if width:100% will work. this is for horizonally Link to comment Share on other sites More sharing options...
jesh Posted March 2, 2007 Share Posted March 2, 2007 Hmm, maybe something like this? <html><head><style type="text/css">#container { border: 1px solid green; height: 200px; position: relative; /* set a reference for child elements */}.centeringDiv{ background-color: red; text-align: center; /* this is to center the img (inline element) */ position: absolute; /* set the position to absolute */ top: 25%; /* and the top at 25% (this is in reference to the parent element) */ width: 100%;}img { vertical-align: middle; } /* this is to fix a weird issue in IE... */</style></head><body><div id="container" > <div class="centeringDiv"> <img src="http://www.w3schools.com/images/w3default80.jpg" /> </div></div></body></html> This worked for me in both IE and Firefox in the Tryit Editor. I hope it helps. Link to comment Share on other sites More sharing options...
chadmichael Posted March 2, 2007 Author Share Posted March 2, 2007 You're supposed to center block level elements, like DIV, with margin:0 auto;,Thanks for the block element centering technique. However, I don't think its what I'm looking for, in this case. I'm trying to center the image within the div. The div itself, I don't need centered; in fact, I want its width to be 100% -- which is centered by nature. Link to comment Share on other sites More sharing options...
Kevin M Posted March 2, 2007 Share Posted March 2, 2007 Just have the image centered in the div? Maybe this:CSS .center {text-align: center;margin: auto;} Then in the HTML: <div class="center">IMAGE HERE</div> That's how I center things. Link to comment Share on other sites More sharing options...
chadmichael Posted March 2, 2007 Author Share Posted March 2, 2007 .center {text-align: center;margin: auto;} Then in the HTML: <div class="center">IMAGE HERE</div> That's how I center things.I need vertical centering too. But thanks for the help. What's the margin:auto; do in this case? Link to comment Share on other sites More sharing options...
jlhaslip Posted March 2, 2007 Share Posted March 2, 2007 You need to declare a width on some thing, some place, whether it is the parent div, or the entire page, otherwise the div will simply fill itself with the image and be done. Link to comment Share on other sites More sharing options...
Kevin M Posted March 2, 2007 Share Posted March 2, 2007 vertical-align: center; Try that maybe? Link to comment Share on other sites More sharing options...
jlhaslip Posted March 2, 2007 Share Posted March 2, 2007 that would be vertical-align: middle; Link to comment Share on other sites More sharing options...
pulpfiction Posted March 2, 2007 Share Posted March 2, 2007 This might help....http://www.brunildo.org/test/img_center.html Link to comment Share on other sites More sharing options...
jesh Posted March 2, 2007 Share Posted March 2, 2007 Did you see my post? http://w3schools.invisionzone.com/index.ph...ost&p=61439 Using that code, I was able to vertically center the image inside of the container div. Link to comment Share on other sites More sharing options...
chadmichael Posted March 3, 2007 Author Share Posted March 3, 2007 Did you see my post? http://w3schools.invisionzone.com/index.ph...ost&p=61439 Using that code, I was able to vertically center the image inside of the container div.Yes, I used that technique plus some supplemental positioning via negative margins. Link to comment Share on other sites More sharing options...
henryhenry Posted March 3, 2007 Share Posted March 3, 2007 What's wrong with setting the margin of the inside div as 50% on top and bottom? Works in Opera 9 & FF2 & IE6If you want relative width on the inner div you have to be careful with O9 and IE6 which seem to recalculate the width using the container width minus the margin (ie (200px-25%)*x% as opposed to just x%)But then maybe you've tried this - couldn't really tell... <div style="width: 200px;height: 400px;border: 1px solid black;"><div style="width: 100px;height: 50%;background: gray;margin-top: 50%;margin-bottom: 50%;margin-left: 25%;"></div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now