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之后添加了其他元素。基本上，用户体验是termSheetPrinted div在JQuery对话框中弹出，并且当它打开时，其他元素会在它们前面实时填充，即使代码实际上不是这样工作的，这就是它的工作方式。

知道我可以将所有这些元素集中在div中吗？

编辑：

附加到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。对于块元素，您必须修复元素的width，并定义自动margin。

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

将此与text-align结合使用以修复IE行为。以下是solutions for centering elements，具体取决于您的代码。

Answer 2

你可以试试这个：

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

</div>

另请参阅：http://dorward.me.uk/www/centre/

Answer 3

在termSheetPrinted中添加另一个容器，将其居中并在该容器内插入所有元素。

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

注意，为了使用margin：0 auto水平居中，您需要指定绝对宽度。这样做的目的是将内容容器（及其所有内容）置于termSheetPrinted中。

顺便提一句，我建议不要使用内联样式，如本例所示。请使用CSS文件。

Answer 4

假设你是正确的（由于它迟到了DOM而没有正确设置样式），我能想到的最简单的答案是在调用.append之后重新应用样式。在.css('text-align','center');参数.append调用后，您可以使用一行[{1}}执行此操作：

success

如果它没有以其他原因为中心，那么这不会解决它。

将所有动态添加到div的元素居中

4 个答案: