CODEWITHSUNDEEP
javascriptcssdom
hitaton
hitaton

Reputation: 173

How to vertically and horizontally center a div using javascript and css margin?

I am currently trying to center a rectangle in an image with only using javascript (no css center properties). However, even if the numbers are right, the showing is wrong. To do this, I use the following code :

$(document).ready(function() {
    
    $(".img-zoom-container").css("width", $("#myimage").width());
    $(".img-zoom-container").css("height", $("#myimage").height());
    
    $("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
    $("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
    $("#lens_container").css("top", ($("#lens").height() / 2));
    $("#lens_container").css("left", ($("#lens").width() / 2));
    
});
.img-zoom-container
{
    border: 1px solid red;
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;
    position: absolute;
}

#lens_container
{
    border: 1px solid cyan;
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

The item I am trying to center is the #lens_container div (appears blue on screen). I also have a white square (#lens div) of size 50px by 50px. I would like to center and to size the blue rectangle in order to have half of the square width at each side of the blue rectangle and same with height. However, as you can see when trying the code, it is not the case although the maths are correct.

I do not know if you can understand my needs, but I would really appreciate help there.

Thanks in advance.

Upvotes: 1

Views: 77

Answers (2)

Koala Yeung
Koala Yeung

Reputation: 7873

There are 2 issues:

First, position: absolute means to position the item "to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block" (reference). The parent element ".img-zoom-container" is not positioned. The initial container block would be <body>, which has some padding by default.

So your #lens_container is positioned relative to <body> of the iframe, which is probably not what you expected. Moreover, <body> by default has a non-zero padding size. You may see it clearer if you simply use CSS to position everything to top: 0 and left: 0:

body {
    background-color: rgba(0, 0, 0, 0.1);
}

.img-zoom-container
{
    border: 1px solid red;
    width: 600px;
    height: 160px;
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;

    position: absolute;
    top: 0;
    left: 0;
}

#lens_container
{
    border: 1px solid cyan;
    width: 550px;
    height: 110px;

    position: absolute;
    top: 0;
    left: 0;
}
<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

To have both #lens and #lens_container positioned relative to .img-zoom-container, you have to give .img-zoom-container a "position" value so it can be the "position ancestor":

$(document).ready(function() {
    
    $(".img-zoom-container").css("width", $("#myimage").width());
    $(".img-zoom-container").css("height", $("#myimage").height());
    
    $("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
    $("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
    $("#lens_container").css("top", ($("#lens").height() / 2));
    $("#lens_container").css("left", ($("#lens").width() / 2));
    
});
.img-zoom-container
{
    border: 1px solid red;
    position: relative; /** this line **/
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;
    position: absolute;
}

#lens_container
{
    border: 1px solid cyan;
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

It's still 1-2 pixels off. That is because you didn't take the border width into consideration (your second issue). You'd get a better result once you clear your head and think how you want the border widths to behave.

Upvotes: 2

Francisco Mendoza
Francisco Mendoza

Reputation: 1

Depending on its container, you could just set an ID on your div like:

CONTENT .

Then in javascript, if there is an event to center it, you could make a function like:

function centerDivItem() {
    document.getElementById("id1").style.alignContent = "center"
}

And then, as I said, call it from another place.

Upvotes: 0

Related Questions