居中动态大小的div [英] Centering a dynamically sized div
问题描述
不是一个网络家伙，我不知道HTML的所有怪癖。我试图集中一些动态大小的内容在一个div。这个内容应该始终居中，所以我挂钩到 window.resize 来做。然后我手动调用 window.resize（）后应用CSS强制它运行一次。
Not being a web guy I don't know all the quirks of HTML. I am attempting to center some dynamically sized content inside of a div. This content should always be centered, so I hooked into window.resize to do it. I then manually call window.resize() after applying the CSS to force it to run once.
是div不首先水平居中 ，只有垂直。
The problem is that the div does not center horizontally at first, only vertically. Subsequent window resizes force the div to center properly.
最初，我认为我必须尝试将div置于准备好的中心位置，因为我首先调用div document.ready ，但是垂直居中的工作和我添加了一些跟踪语句，当然， left position正在计算正确，只是没有应用（似乎）。
Initially I thought that I must be trying to center the div before it was 'ready' as I am calling it first before document.ready fires, but the vertical centering works and I added some trace statements and, sure enough, the left position is being calculated correctly, just not applied (seemingly).
无论如何，这是我第一次真正进入HTML + CSS，确保你们会快速钉。
Anyway, this is my first real foray into HTML+CSS, so I'm sure you guys will nail it quickly. Here is some sample html and javascript which reproduces the problem.
此外，我的测试已经在Chrome中完成了。
Also, my testing has been in Chrome exclusively thus far.
<html lang="en-US">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).resize(function() {
var win = $(window);
var area = $('#signuparea');
$('#signuparea').css({
position: 'absolute',
left: (win.width() - area.outerWidth()) / 2,
top: (win.height() - area.outerHeight()) / 2
});
//$('body').append('<div>l=' + ((win.width() - area.outerWidth()) / 2) + '</div>');
//$('body').append('<div>w=' + area.outerWidth() + '</div>');
//$('body').append('<div>h=' + area.outerHeight() + '</div>');
});
$(window).resize();
});
</script>
</head>
<body style="background-color:0000FF">
<div id="signuparea">
<input type="password">
</div>
</body>
</html>
推荐答案
c> window.resize 事件处理程序：
What about using this code in your window.resize event handler:
$('#signuparea').css({
position : 'absolute',
left : '50%',
top : '50%',
'margin-top' : '-' + Math.round(area.height() / 2) + 'px',
'margin-left' : '-' + Math.round(area.width() / 2) + 'px'
});
由于上面设置的三个属性是静态的，所以可以在CSS中设置：
Since three of the properties set above are static they can be set in CSS:
#signuparea {
position : absolute;
top : 50%;
left : 50%;
}
这使得你的JS看起来像这样：
Which makes your JS look like this:
$(function() {
$(window).resize(function() {
var area = $('#signuparea');
$('#signuparea').css({
'margin-top' : '-' + Math.round(area.height() / 2) + 'px',
'margin-left' : '-' + Math.round(area.width() / 2) + 'px',
});
}).trigger('resize');
});
以下是此解决方案的jsfiddle： http://jsfiddle.net/jasper/Ty6Af/2/
Here is a jsfiddle of this solution: http://jsfiddle.net/jasper/Ty6Af/2/
这篇关于居中动态大小的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
