Центрирование всех элементов, которые динамически добавляются в div

Question

Итак, у меня есть этот div:

<div id="termSheetPrinted">

</div>

Этот div заполняется с помощью этого метода:

function GenerateTermSheet()
        {
            var urlString = "<%= System.Web.VirtualPathUtility.ToAbsolute("~/mvc/Indications.cfc/RenderPartialTermSheetView")%>";
            var jsonNickname = 
                {
                    id : GetGUIDValue(),
                    viewName : 'Nickname'
                }
                $.ajax({
                    type: "POST",
                    url: urlString,
                    data: jsonNickname,
                    success: function(data) {
                        $('#termSheetPrinted').append(data);
                    }
                });
            $('#termSheetPopup input[type="checkbox"]:checked').each(function(){
                var checkedName = $(this).attr("name");
                var json = 
                {
                    id : GetGUIDValue(),
                    viewName : checkedName
                }
                $.ajax({
                    type: "POST",
                    url: urlString,
                    data: json,
                    success: function(data) {
                        $('#termSheetPrinted').append(data);
                    }
                });
            })
            $('#termSheetPopup').dialog('close');
            $('#termSheetPrinted').dialog('open');
        }

Таким образом, частичные представления извлекаются с сервера и добавляются в div какони возвращаются успешно.Тем не менее, все выровнено в div.Я попытался добавить стиль в div, к которому они добавляются, например:

<div id="termSheetPrinted" style="text-align:center;">

</div>

Это не сработало, и я предполагаю, что причина в том, что другие элементы добавляются после того, как начальный divоказаны.По сути, пользовательский опыт заключается в том, что div termSheetPrinted выскакивает в диалоговом окне JQuery, и когда оно открыто, другие элементы заполняются в реальном времени перед ними, даже если код на самом деле не предназначен для такой работы,как это работает.

Знаете, как я могу расположить все эти элементы по центру в div?

РЕДАКТИРОВАТЬ:

Пример представления, добавляемого кдив.Это возвращается от моего контроллера, возвращающего представление, затем вызов Ajax захватывает это и добавляет это:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Chatham.Web.Models.Indications.ModelBase>" %>

<table id="nickNameBTS">
    <tr id="tr5">
        <td id="td7" style="text-align: right;">
            Indication Nickname:
        </td>
        <td id="td8" colspan="3">
            <%= Html.Encode(Model.STPData.ProjectName)%>
        </td>
    </tr>
</table>

    <script>
        $(document).ready(function () {
            $("#nickNameBTS").bubble({ width: 400, title: 'Nickname' });
        });

    </script>

Answer 1

Тот факт, что внутренние элементы добавляются с помощью Ajax, не должен влиять на то, как они отображаются, потому что изменение DOM должно инициировать перекомпоновку.

text-align:center работает только на встроенных элементах или любых элементах, крометолько на IE5 и IE6.Для block элементов вы должны исправить width вашего элемента и определить auto margin.

#elementToCenter { 
  margin-left: auto; 
  margin-right: auto; 
  width: 960px;
}

Объедините это с выравниванием текста, чтобы исправить поведение IE.Вот решения для центрирующих элементов в зависимости от вашего кода.

Answer 2

Добавьте еще один контейнер внутри termSheetPrinted, отцентрируйте его и вставьте все элементы внутри этого контейнера.

<div id="termSheetPrinted">
  <div id="content" style="width: 500px; margin: 0 auto;"></div>
</div>

Обратите внимание, что для горизонтального центрирования с помощью margin: 0 auto необходимо указать абсолютную ширину.Что это будет делать, так это центрирование контейнера содержимого (и всего его содержимого) внутри termSheetPrinted.

Кстати, я советую не использовать встроенные стили, как показано в этом примере.Пожалуйста, используйте CSS-файлы.

Answer 3

Вы можете попробовать это:

<div id="termSheetPrinted" style="text-align:center; margin-left: auto; margin-right: auto">

</div>

Смотри также: http://dorward.me.uk/www/centre/

Answer 4

Предполагая, что вы правы (что его стиль не корректен из-за позднего поступления в DOM), самый простой ответ, который я могу придумать, - это повторно применить стиль после вызова .append. Это можно сделать одной строкой .css('text-align','center'); после вызова .append в параметре success:

          $.ajax({
                ...
                success: function(data) {
                    $('#termSheetPrinted').append(data);
                    $('#termSheetPrinted').css('text-align','center');
                }

Если это не по центру по другой причине, это не исправит.