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 Member #120589 because: wrong forum - not php
  • 4 Contributors
  • 7 Replies
  • 344 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short answer: the inner div is expanding because a normal block with width: auto fills its parent, so margin: 0 auto only recenters when a width is defined. and pointed this out and 's jQuery fix (measuring the image and applying offsets) is a valid JS approach. Two CSS-first techniques that avoid hard-coding the inner width are shown below — they center unknown-size images and keep them inside the viewport.

A transform-based centering method (works in older browsers and needs no width math):

#overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 999;
}

#image_case {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  max-width: 90vw;
  max-height: 90vh;
  box-sizing: border-box;
  padding: 8px;
}

#image_case img {
  display: block;
  max-width: 100%;
  height: auto;
}

A modern flexbox alternative (concise and responsive):

#overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  z-index: 999;
}

#image_case {
  max-width: 90vw;
  max-height: 90vh;
  background: #fff;
  padding: 8px;
}

#image_case img { display: block; max-width: 100%; height: auto; }

Notes and troubleshooting: remove duplicate declarations like position:absolute; position:fixed; on the same rule — use position: fixed for a full-page overlay. Add overflow: auto to #image_case if very large images must scroll inside the overlay. If sticking with a JS solution like , account for cached images by checking img.complete or using naturalWidth before measuring:

const img = document.querySelector('#image_case img');
function onImgReady() {
  // safe to read naturalWidth / naturalHeight here
}
if (img.complete) onImgReady();
else img.addEventListener('load', onImgReady);

For broad compatibility, use flexbox/transform CSS first and fall back to a JS measurement only when specific layout adjustments are required.

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.