c# - 无论屏幕大小或分辨率如何，都将加载指示器 div 定位在位置

Question

在我的 aspx 页面中，我在一个表格中有 3 个 td，我在其中放置了 div 以显示我的内容。我正在使用 ajax 将数据加载到每个 div.in 中，我在其中显示我的内容 div 我还放置了一个 div 以在数据 div 加载时显示加载指示器。我的问题是在通过具有不同分辨率或屏幕尺寸的不同机器看到加载指示器 div 时定位它。目前我的加载指示器 div 是绝对类型。任何人都可以提出一种优雅的方法来将我的加载指示器 div 定位在三个 td 中，以便无论屏幕尺寸或分辨率如何，它都能正确居中。我正在使用 C# Web 应用程序。

下面是其中一个 td 的标记，

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
                    <tr>
                        <td class="Box_TopLeftCurve">
                            &nbsp;
                        </td>
                        <td valign="top" class="Box_TopRep">
                        </td>
                        <td class="Box_TopRightCurve">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_LeftRep">
                            &nbsp;
                        </td>
                        <td align="left" valign="top">
                            <div class="Box_GridArea">
                               Data Here
                            </div>
                            <div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
                                Loading Indicator
                            </div>
                        </td>
                        <td class="Box_RightRep">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Box_BaseLeftCurve">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRep">
                            &nbsp;
                        </td>
                        <td class="Box_BaseRightCurve">
                            &nbsp;
                        </td>
                    </tr>

Answer 1

将指示器显示为背景图像，以便轻松以任何分辨率为中心。

.loader { background: url('/images/loader.gif') center center no-repeat; }

您可以将背景图像分配给应该出现的表格或 td。

加载后，您可以使用 jQuery 删除加载器类，例如：

if (is_loaded) {
  $('table td').removeClass('loader')
}