Hello,
Thanks for the reply.
Adding the margin: 0 auto; didn't work. Do you have any other ideas?
Main Topics
Browse All TopicsHello!
Sorry about the vagueness in the question title.
Basically, I have a div that has it's width set as a percentage. Inside the div is an image (obviously with it's size in pixels.
What i'd like to happen is:
1) When the containing div is large enough to fit the image in, the image will float in the middle (which I think the text-align: center did actually sort out.
2) If the containing div is too small, i'd like the image's two sides to be hidden in equal amounts. (Using overflow: hidden only overlaps one side of the image)
I've a rough example of the code i'm working with below.
Thank you.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
This is funky but it works. I hope it turns out there is a more elegant solution than using JavaScript which you could active in an onLoad() even in the body tag, or just inline.
<div id="picContainer" name="picContainer"
style="overflow: visible; text-align:center;
width:25%;
border:solid 1px red;
margin:0px auto 0px auto;
overflow:hidden;">
<img src="screenshot3.png" id="picture" width="1280" height="821"/>
</div>
<input type="button" value="center the picture in the div" onClick="
n=document.getElementById(
m=document.getElementById(
if (m > n) {
x=(m-2)/2 * -1; x = x + 'px';
document.getElementById('p
}" />
oops there was a typo in that, here is the real deal:
<div id="picContainer" name="picContainer"
style="overflow: visible; text-align:center;
width:25%;
border:solid 1px red;
margin:0px auto 0px auto;
overflow:hidden;">
<img src="screenshot3.png" id="picture" width="1280" height="821"/>
</div>
<input type="button" value="center the picture in the div" onClick="
n=document.getElementById(
m=document.getElementById(
if (m > n) {
x=(m-n)/2 * -1; x = x + 'px'; alert(m + ' ' + n + ' ' + x);
document.getElementById('p
}" />
Ah hah! That's a nice way of doing it, but it doesn't work as you resize the browser window, which i'd really like it to do.
When you click the button to center it, it's perfect, but then when you resize the window, it's no longer centered.
Is there anyway to get it to refresh automatically as the window is resized?
Business Accounts
Answer for Membership
by: lharrispvPosted on 2009-08-19 at 07:19:49ID: 25132928
div.pictureContainer {
text-align: center;
margin:0 auto;
overflow: hidden;
width: 50%;
}
This should center the image. If it is properly centered then you should get the effect you are look for