垂直和水平居中加载图像

-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

垂直和水平居中加载图像

回答

相关问题