Question

我想在html表格和中心显示图像。怎么做到这一点？这张图片只不过是一张进度条。所以这个图像会在加载时显示在html表上。我尝试下面这样，但它不是来自html表和表中心。

<div style="overflow: auto;height: 400px">
    <table id ="tbl"  style="width: 100%;background-image: url(img/busyIndicator.gif);background-repeat: no-repeat;background-position: center" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>

希望它澄清我的问题。如果您需要更多信息，请告诉我。

UPDATE1

我现在已经在桌面上添加了图像而不是td，但仍未显示

UPDATE2 我通过ajax调用将数据加载到我的jquery模板中。不确定是否需要显示我的代码以进行ajax调用。因此，图像应该在数据加载时出现，并且在完成加载时应该关闭

Answer 1

在style属性中，只需添加：

background-position: center center;

所以它是beacame：

<td style="background-image: url(img/img1.gif); background-position: center center" ></td>

在此处阅读更多内容 - ＆gt; http://www.w3schools.com/cssref/pr_background-position.asp

Ps：如果你是合成的，风格属性会更好，所以你可以用这种方式写所有

background: url(img/img1.gif) center center;

在这里了解“背景”属性的工作原理 - ＆gt; http://www.w3schools.com/css/css_background.asp

编辑：

如果你想把加载img放在标签中并将它放在td的中心，你必须为这个样式分配图像：

style="display:table-cell;vertical-align:middle; margin:auto"

但是，请在该图像上给出一个类，并将该样式写入css文件中。

Answer 2

我想你只需添加：

position: relative到表
background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;到你的td

所以你的代码将是：

<div style="overflow: auto;height: 400px">
    <table id ="tbl" style="position: relative; width: 100%;" >
        <colgroup>
            <col style="width: 30px"/>
            <col style="width: 10px"/>
            <col style="width: 1px" />
            <col style="width: 80px"/>
            <col/>
        </colgroup>
        <script id="Template" type="text/x-jquery-tmpl">
        <tr >
            <td>${Id}</td>
            <td>${Age}</td>
            <td style="background-image: url(img/img1.gif); background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;"></td>
            <td>${Name}</td>
        </tr>
        </script>

        <tbody id="List">
        </tbody>
    </table>
</div>

如何将图像居中于html表格

2 个答案: