如何適應屏幕

的中心絕對的div我創建一個小圖片的網頁，當它被點擊，然後在一個絕對的div打開大圖我想，這是真正的工作。但是，當頁面窗口顯示底部，我們笏小圖片的點擊它appare在屏幕頂部，我不喜歡它。我希望它出現在每一次屏幕的中心，請看本頁面： http://www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php 如何適應屏幕

我的代碼示例：

HTML代碼：

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

CSS代碼：

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

jQuery代碼：

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(); 
})

來源

2013-12-12 user2615494

添加left和right爲0和使用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 
}

這是爲了使水平股利中心不垂直方向的中間。

來源

2013-12-12 09:39:21 Sowmya

你並不需要使用所有的這個JS來計算，並在屏幕中間顯示的圖像。你可以使用CSS風格和位置，然後JS來隱藏/顯示。你的位置：固定;然後您可以更輕鬆地定義屏幕上的位置。

嘗試這樣：

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

如果你想它的水平和垂直中心到整個屏幕，完全這就使得圖像在屏幕

來源

2013-12-12 09:42:06 TimPalmer

感謝，我嘗試它有助於減少代碼，但它不是我的解決方案，當我點擊下方圖片，然後在左側或屏幕 – user2615494

的頂格顯示只記得添加陰性切緣的寬度的一半和高度的圖像，它應該很好地坐在屏幕的中心 – TimPalmer

中心忽略其他要素在網頁上您可以使用

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

這將元素放置在用戶屏幕的中心。

來源

2013-12-12 09:43:39 Dropout

如何適應屏幕

回答

相關問題