CODEWITHSUNDEEP
javascripthtmlcss
M. Belousov
M. Belousov

Reputation: 15

How to center image, when i open it in current window

I have a problem with image centering. I open image in current window by clicking on it, but it looks wrong..How it looks now

How I should fix it? Here is my html markup:

<div id="bgdiv"></div>
<img src="" onclick="expand(this);"... />

and here is my js methods:

expand = function (a) {
var me = a.src;
$(a).after("<img src=" + me + " id='2rmv' />");
$('#2rmv').css({
    'position': 'absolute',
    'width': '500px !important',
    'height': '400px !important',
    'right': '1%',
    'z-index': '10001',
    'display': 'block',
    'border': '2px groove white',
    'border-radius': '10px'
});
$('#bgdiv').css({
    'background-color': 'black',
    'height': '100%',
    'text-align': 'center',
    'left': '0px',
    'opacity': '0.7',
    'position': 'fixed',
    'top': '0px',
    'width': '100%',
    'z-index': '10000'
});
$('#bgdiv').on('click', function () {
    $('#bgdiv').removeAttr("style");
    $('#2rmv').remove();
});
};

If I add 'left' parameter instead of 'right', the last element shows wrong..

Upvotes: 0

Views: 241

Answers (1)

RononDex
RononDex

Reputation: 4183

A very quick google Search gave me following answer in under 10seconds:

Apply following css to your image div:

position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)

Upvotes: 2

Related Questions