垂直和水平居中加載圖像

-1

我想在文檔加載後居中放置圖像。這是抓住。我的文檔的寬度大於瀏覽器的高度，因此我無法將其與文檔垂直居中。我不能將它與瀏覽器高度垂直居中，因爲如果用戶在不是全屏的瀏覽器中打開文檔，其位置與全屏不同。垂直和水平居中加載圖像

從本質上講，我需要一種方法在全屏時在瀏覽器屏幕上居中放置圖像，即使文檔在未全屏時打開也是如此。

更新這是我試過

<script> 
$(document).ready(function() { 
var docheight = $(window).height(); 
var logopositionheight = docheight/2; 
var docwidth = $(window).width(); 
var logopositionwidth = docwidth/2; 
$('#welcome_logo').css({position: 'absolute'}); 
$('#welcome_logo').css({top:logopositionheight-150}); 
$('#welcome_logo').css({left:logopositionwidth-500}); 
}); 
</script>

我也改變了$（窗口）$（文件），但沒有成功是因爲什麼上述我的。

來源

2014-05-01 etangins

你到目前爲止嘗試過什麼？你遇到的問題是什麼？你有任何你可以分享的代碼嗎？也許設置一個jsfiddle來展示這個問題？ – badAdviceGuy

我更新了問題以包含我嘗試的內容。 – etangins

提供的圖像top和50%left然後減去一半的圖像的高度和寬度從邊緣，例如，如果您的景觀形象是200像素100像素，你會寫margin: -100px 0 0 -50px，這應該完全居中圖像。

您可能還需要將position元素根據容器和首選項更改爲fixed或absolute。

來源

2014-05-01 16:15:02 Shakesy

雖然這是整個文件，我的文件比窗口大。即使窗口不是全尺寸，我也需要一個全尺寸窗口的中心。 – etangins

就像@Shakesy說的，你需要用innerHeight和innerWidth來獲得瀏覽器的「畫布」尺寸。
一旦你得到，你可以水平定位圖像：
((innerWidth/2) - (imageWidth/2))。
此外，垂直位置可以設置爲：
((innerHeight/2) - (imageHeight/2))。
你可以把這個「之後」的頁面加載。

來源

2014-05-01 16:28:29 Danny

當頁面加載一個瀏覽器窗口並不是全尺寸時，它不起作用。這是我的問題 – etangins

只是爲了清楚起見，爲什麼你的內容比document.innerHeight更寬？你是否應該努力使自己的內容適合文檔？ – Danny

不更寬，更高。它是滾動密集型的。我知道上面的整個想法，但我正在製作一個滾動網站。雖然對我來說這不是問題。正是在瀏覽器窗口不是完整大小的時候加載它的大小會將該圖像置於該窗口中，以便當它完全大小時，圖像保持原位並且沒有怪異。 – etangins

第一選項，（部分來自user3592733的答案）使用JS：

的Javascript

function initialize(imageWidth, imageHeight) { 
el.style.top = ""+((innerHeight/2) - (imageHeight/2))+"px"; 
el.style.left = ""+((innerWidth/2) - (imageWidth/2))+"px"; 
} 
initialize(); 
// will update when browser is resized 
window.onresize = initialize;

或第二選擇，使用CSS和顯示：表

主頁

<style type="text/css"> 
.wrapperdiv { 
position:absolute; 
display:table; 
width:100%; 
height:100%; 
} 
.containerdiv { 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
} 
</style> 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ifiedivdisplayinlineblock.css" /> 
<![endif]--> 
</head> 
<body> 
<div class="wrapperdiv"> 
<div class="containerdiv"> 
content here 
</div> 
</div>

ifiedivdisplayinlineblock.css

.wrapperdiv { 
display:inline-block; 
}

這是一種在CSS痛苦的，但是這就是我做我的網頁上:)非常自我解釋，我認爲

來源

2014-05-01 23:08:35 tomysshadow

css選項使用百分比，從目前爲止我所看到的，這是行不通的。我評論了內部高度和內部寬度的問題。 – etangins

調整大小的瀏覽器是由操作系統來處理，所以裏面的內容瀏覽器不是由操作系統本身「控制」，而是由瀏覽器自身呈現。所以，換句話說，當瀏覽器感覺到它正在被用戶重新調整大小時，它可以發送一個觸發器給javascript，通知它這樣的事件。
對於Mozilla，你可以嘗試
（1）https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

來源

2014-05-02 05:22:19 Danny

垂直和水平居中加載圖像

回答

相關問題