CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2615494
user2615494

Reputation: 47

How to fit absolute div in center of screen

i create a page with small Image and i want when it's clicked then open large Image in a absolute div, it's work truly. but when window show bottom of page and we wat click on small image it's appare in top of screen and i don't like it.I want it appear in center of screen in every time ,please see it in this page: http://www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php

My Code Sample is:

HTML CODE:

<!-- This is Div of Large Image and Background Shade -->
<div class="BackgroudShade"></div>
<div class="DivOfImage"><img class="LargeImage"/></div>

CSS CODE:

.DivOfImage {
    border: 8px solid #FFF;
    color:#FFF;
    background-color:#FFF;
    border-radius:10px;
    position:absolute;
}

JQuery CODE:

function LoadShowDiv () {
    $('.BackgroudShade').slideDown(800);   // shade of background will be visible
    $(".DivOfImage").show();               // Div of Large Image will be visible          
    // When Image loaded successful then set width,height and top,left of Large Image Div 
    // but i want set top,left when screen is scroll down to bottom of page
    // then show Div at middle of screen in every time
    $('.LargeImage').load(function() {     
       $('.DivOfImage').width($('.LargeImage').width());
       $('.DivOfImage').height($('.LargeImage').height());
       var LeftPostion = (WidthOfScreen - $('.LargeImage').width()) / 2;
       var TopPostion = (HeightOfScreen - $('.LargeImage').height()) / 2;
       $(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});
       $('.LargeImage').show(1000);
    })
}

$('#SmallImage').click(function(){
    $('.LargeImage').attr('src','LargeImage.jpg');
    LoadShowDiv();
})

Upvotes: 0

Views: 1152

Answers (3)

Dropout
Dropout

Reputation: 13866

If you want to center it to the entire screen both horizontally and vertically and completely ignore other elements on the webpage you can use

#yourElement{
    position: fixed;
    height: 40px;
    width: 20px;
    left: 50%;
    top: 50%;
    margin-left: -10px; //half of width
    margin-top: -20px; //half of height
}

This places the element on the center of the user's screen.

Upvotes: 0

TimPalmer
TimPalmer

Reputation: 119

You don't need to use all of this JS to calculate and show an image in the middle of the screen. You can use CSS to style and position and then JS to hide/show. You position:fixed; and you can then define the position on the screen a lot easier.

Try something like this:

CSS
.LargeImage {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -(half of image height);
    margin-left: -(half of image width);
}

This will leave the image in the centre of the screen

Upvotes: 2

Sowmya
Sowmya

Reputation: 26989

Add left and right as 0 and use margin:0 auto

.DivOfImage {
    border: 8px solid #FFF;
    color:#FFF;
    background-color:#FFF;
    border-radius:10px;
    position:absolute;
    left:0;
   right:0;
   margin:0 auto
}

This is to make the div horizontally center not vertically middle.

Upvotes: 1

Related Questions