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>


    margin:0 auto;
    width: auto;

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.

Recommended Answers

All 7 Replies

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 {
    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>

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>
  #overlay { position: relative; height:300px; background-color:#ababab;}
  #image_case { position: absolute; top: 50%; left: 50%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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


$(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").css( {"margin-top": marginTop + "px", "margin-left": marginLeft + "px" });


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

Great to hear that it solved your issue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.