[英]How to center a div generated dynamically?
I generate a div for my javascript automated validation script . 我为我的JavaScript自动验证脚本生成了一个div。 It is generated with below code: 它是使用以下代码生成的:
var alertbox = document.createElement("div");
Now how do i center that div programatically both horizontally and vertically? 现在如何以编程方式在水平和垂直方向上将div居中?
Note: Currently I am showing an alert box but once i know how to center a div, i will replace the alertbox with this dynamically generated div which will also provide some lightbox-like effect. 注意:目前,我正在显示一个警报框,但是一旦我知道如何将div居中,我将用此动态生成的div替换警报框,这也将提供一些类似于lightbox的效果。
Thanks 谢谢
Note: For reference, you can download latest version of this script here . 注意:作为参考,您可以在此处下载此脚本的最新版本。
Please note that i dont want to use external css for this because this is validation script and it should be able to do it programatically. 请注意,我不想为此使用外部CSS,因为这是验证脚本,它应该能够以编程方式进行。 For example: using something like this can be helpful: 例如:使用类似的方法可能会有所帮助:
alertbox.style.position: whatever
....
It's a matter of applying the same CSS rules as you would have with static content. 这是要应用与静态内容相同的CSS规则的问题。 Horizontal centering can be achieved as described in this article - basically you give the div a fixed with and set left and right margins to auto
. 如本文所述,可以实现水平居中-基本上,您将div固定为,并将左边距和右边距设置为auto
。 Vertical centering is a bit trickier - a few approaches are discussed here and detailed in this this blog post . 垂直居中是有点麻烦-一些方式进行了讨论这里 ,详细在这本博客帖子 。
The tidiest way is probably to define a CSS class that takes care of the centering and then apply that class to the dynamically generated element like this: 最简洁的方法可能是定义一个CSS类,该类负责居中,然后将该类应用于动态生成的元素,如下所示:
alertbox.className = "myCssClass";
Update: Since you are already using JavaScript for creating the div, you could of course use it for the centering as well (in combination with CSS absolute positioning) - that would actually probably be a cleaner solution (due to the hackishness of the CSS vertical centering). 更新:由于您已经在使用JavaScript创建div,因此当然也可以将其用于居中(与CSS绝对定位结合使用)-实际上,这可能是一种更简洁的解决方案(由于CSS垂直处理的笨拙性)定心)。 Exactly how you do this depends a bit on what tools you are using - it's probably much easier to achieve with a JS framework such as Prototype or jQuery than with "raw" JavaScript since browsers handle window/browser heights a bit differently. 确切地说,您如何执行此操作取决于您所使用的工具-使用Prototype或jQuery之类的JS框架比使用“原始” JavaScript来实现要容易得多,因为浏览器对窗口/浏览器高度的处理略有不同。
If you are using jQuery, why not use the validation plugin ? 如果您使用的是jQuery,为什么不使用验证插件 ?
You should be able to combine it with a modal window (like SimpleModal ). 您应该能够将其与模式窗口(如SimpleModal )组合。
But if you don't want to change what you have already done, try something like this: 但是,如果您不想更改已经完成的操作,请尝试以下操作:
I would just apply some CSS rules to the div to position it (I've included an overlay which covers up the page and puts the alertbox on top): 我只将一些CSS规则应用于div即可将其定位(我包括一个覆盖页面的覆盖层,并将警报框放在顶部):
Note : The reason the div is positioned to the far left is because you need to get the dimensions of the div with the contents inside. 注意 :div定位在最左边的原因是因为您需要获取包含内容的div的尺寸。 A hidden div will have a height and width of zero. 隐藏的div的高度和宽度为零。 Once the size is determined, it calculates the center of the page and positions the div. 确定大小后,它将计算页面的中心并定位div。
CSS 的CSS
#overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
}
#alertbox {
background: #444;
padding: 10px;
position: absolute;
left: -99999px;
top: 0;
z-index: 101;
}
Script 脚本
function alertBox(alertMsg){
// Add overlay
$('<div id="overlay"></div>')
.hide()
.appendTo('body')
.fadeIn('slow');
// Add alert
$('<div id="alertbox"></div>')
.html(alertMsg)
.appendTo('body');
// calculate & position alertbox in center of viewport
var abx = $('#alertbox');
var abxTop = ($(window).height() - abx.height())/2;
var abxLft = ($(window).width() - abx.width())/2;
abx
.hide()
.css({ top: abxTop, left: abxLft })
.fadeIn('slow');
// add click to hide alertbox & overlay
$('#overlay, #alertbox').click(function(){
$('#overlay, #alertbox').fadeOut('slow',function(){
$('#alertbox').remove();
$('#overlay').remove();
});
})
}
For whatever reason, I have not been able to center a DIV
using margin-right
and margin-left
. 无论出于什么原因,我都无法使用margin-right
和margin-left
来使DIV
margin-left
。 What I have found works better is to encapsulate them within a table (it's a bit globby code, but it works for me). 我发现更好的方法是将它们封装在表中(这有点笨拙的代码,但是对我有用)。 And you can use the DOM style object to modify the margin as follows: 您可以使用DOM样式对象按如下所示修改边距:
<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.