Как центрировать div, генерируемое динамически?

Question

Я создаю div для моего javascript automated validation script. Он генерируется с кодом ниже:

var alertbox = document.createElement("div"); 

Теперь, как я могу централизовать этот div программно и горизонтально, и вертикально?

Примечание: В настоящее время я показываю окно предупреждения, но как только я знаю, как отцентрировать DIV, я буду заменить alertbox с этим динамически генерируемой DIV, который также обеспечит некоторое лайтбокс, как эффект.

Благодаря

Примечание: Для справки, вы можете скачать последнюю версию этого скрипта here.

Обратите внимание, что я не хочу использовать внешние css для этого, потому что это скрипт проверки и он должен иметь возможность делать это программно. Например: используя что-то, как это может быть полезно:

alertbox.style.position: whatever 
.... 

Answer 1

Это вопрос применения тех же правил CSS, как вы бы со статическим контентом. Горизонтальное центрирование может быть достигнуто, как описано в this article - в основном вы даете div фиксированный и устанавливаете левое и правое поля на auto. Вертикальное центрирование немного сложнее - обсуждается несколько подходов here и подробно описано в этом this blog post.

tidiest путь, вероятно, определить класс CSS, который заботится о центрировании, а затем применить этот класс к динамически созданному элементу, как это:

alertbox.className = "myCssClass"; 

Update: Поскольку вы уже используете JavaScript для создания div, вы могли бы, конечно, использовать его и для центрирования (в сочетании с абсолютным позиционированием CSS) - это на самом деле, вероятно, было бы более чистым решением (из-за хакерства вертикального центрирования CSS). Именно то, как вы это делаете, немного зависит от того, какие инструменты вы используете. Вероятно, гораздо проще достичь с помощью JS-инфраструктуры, такой как Prototype или jQuery, чем с «сырым» JavaScript, поскольку браузеры обрабатывают высоту окна/браузера несколько иначе.

Answer 2

Если вы используете jQuery, почему бы не использовать validation plugin?

Вы можете объединить его с модальным окном (например, SimpleModal).

Но если вы не хотите, чтобы изменить то, что вы уже сделали, попробовать что-то вроде этого:

Я бы просто применить некоторые правила CSS в DIV позиционировать его (я включил накладку, которая охватывает вверх страницы и помещает alertbox сверху):

Примечание: причина DIV позиционируется в крайнее левое положение, потому что вам нужно, чтобы получить размеры DIV с содержимым внутри. Скрытый div будет иметь высоту и ширину нуля. Как только размер определяется, он вычисляет центр страницы и позиционирует div.

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

Answer 3

По какой-то причине, я не был в состоянии центрировать DIV с помощью margin-right и margin-left. То, что я нашел, работает лучше, - это инкапсулировать их в таблицу (это немного код для глобализации, но он работает для меня). И вы можете использовать объект DOM стилей, чтобы изменить запас следующим образом:

<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>