I know this has been asked a thousand times in other locations but I have tried many solutions and can not get an answer. I have two divs, one called overlay and one called image_case. The overlay covers the entire page, then the image_case is suppose to be in the center of the overlay div. But the image_case doesnt have a set width becuase a new image is always placed inside of it, so i can not get the div to be centered.

<div id="overlay">
<div id="image_case">
<a href="#"><img src="uploaded_images/6a829a83a66232a390ceabf942c6e02b.png" /></a>
</div>
</div>

CSS

#overlay{
    position:absolute;
    position:fixed;
    z-index:1;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.8) 
}
#image_case{
    position:relative;
    margin:0 auto;
    width: auto;
    margin-top:5%;
    max-height:none;
    background-color:rgba(255,255,255,1);   
}

The image_case just takes the width of its parent div, which is the overlay div and it makes it the width of the enitre page.

HI garyjohnson,

For auto align center using DIV, margin & width plays a important role. So, u must assign the width to fix the issue.

Eventhough, there is few more possiblities to fix, here are the details,

Fix 1:

#overlay {
    position:absolute;
    position:fixed;
    z-index:1;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, .8);
    text-align: center;  /* Added this line */
}

Fix 2:

<div id="overlay" align="center">
  <div id="image_case"> <a href="#"><img src="JQuery/images/slider.jpg"/></a> </div>
</div>

Try any of the fixes.

Happy coding.... :)

This is because you have set the width to "auto"

Either specify the exact width you require and define the max-width

or remove it completely such that it adjusts on its own

width:auto; causes the div to adjust according to the total space alotted to it.

Thanks for the responses! But I can not set the width of the inner div becuase I don't know what it is going to be, it continuesly changes. I have set it too auto but the inner div take the width from its parent div.

So, while doing some research online, I thought that we could use jQuery to determine the height and width of the image, then assign the "image_case" div the same width and height of the image within. This is what i came up with. It seems to work as expected without having the explicit width and height attributes assigned to the image element.

<!DOCTYPE html>
<html>
<head>
<style>
  #overlay { position: relative; height:300px; background-color:#ababab;}
  #image_case { position: absolute; top: 50%; left: 50%;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="overlay">
   <div id="image_case"><img id="img1" src="image1.jpg"  /></div>
</div>

<script>

$(document).ready(function() {
    $('#img1').load(function() {
        var srcImg = $("#img1");
        var newImage = new Image();
        newImage.src = srcImg.attr("src");

        var imageWidth = newImage.width;
        var imageHeight = newImage.height;
        var marginTop = -Math.abs(imageHeight / 2);
        var marginLeft = -Math.abs(imageWidth / 2);
        $("#image_case").width(imageWidth).height(imageHeight);
        $("#image_case").css( {"margin-top": marginTop + "px", "margin-left": marginLeft + "px" });
    });
});

</script>
</body>
</html>

Thanks for the response and the effort! That Jquery works just wonderful! I really appreciate it!

Great to hear that it solved your issue.