Member Avatar for garyjohnson

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.

Edited by diafol because: wrong forum - not php
  • 4 Contributors
  • 7 Replies
  • 325 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 7 Replies

Member Avatar for mrvijayakumar

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.... :)

Edited by mrvijayakumar because: removed bold formatting
Member Avatar for crescendo

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.

Member Avatar for garyjohnson

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.

Member Avatar for JorgeM

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>
Member Avatar for garyjohnson

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

Member Avatar for JorgeM

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, networking, learning, and sharing knowledge.