在td内居中对齐jquery ui-icon答案

【问题标题】：Center align jquery ui-icon inside td在td内居中对齐jquery ui-icon
【发布时间】：2011-07-20 15:43:11
【问题描述】：

我有这样的情况，使用 gQGrid：

<td role="gridcell" style="text-align:center;" title="" aria-describedby="BaseBetsGrid1_approved">
<span class="ui-icon ui-icon-closethick"/>
</td>

我怎么可以慢跑呢？

我试图将它包装到 div 并从这里获取 wraptocenter 类：http://www.brunildo.org/test/img_center.html

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

    <td role="gridcell" style="text-align:center;" title="" aria-describedby="BaseBetsGrid1_approved">
    <div class="wraptocenter">
    <span class="ui-icon ui-icon-closethick"/>
    </div>
</td>

但这无济于事。

如何用最少的 CSS 样式做到这一点？

可能指定margin-left 会更容易吗？

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

试试这个...

<span style='display:block; margin: 0 auto;' class='ui-icon ui-icon-check'></span>

【讨论】：

【解决方案2】：

虽然我写这个答案时这个问题已经九个月了，但我希望这个解决方案至少可以帮助下一个需要解决这个问题的人。

我正在使用 jQuery dataTables 插件，并试图找到解决此问题的方法，今天我来到了这个页面。

我尝试了 Yasen 的建议，如下所示：

<td><span class="ui-icon ui-icon-folder-collapsed" style="background-position:center; display:inline-block;"></span></td>

虽然此居中图标，但该图标不是预期的图标。

相反，显示的是一个图标的右侧、另一个图标的左侧以及它们之间的空间。

查看窗口似乎已移至中心，但 ui-icon 源保持静止。

基于这个观察，我用一点直觉产生了以下内容（为了清晰起见，格式很好）：

<td>
    <span style="background-position:center; display:inline-block;">
        <span class="ui-icon ui-icon-folder-collapsed"></span>
    </span>
</td>

~~这个实现成功了！~~

编辑：

我以为这就是它的全部内容，但是当我回到我的代码时，我意识到仍然有一个类应用于我的包含样式的类

text-align: center;

当我从中删除类时，ui-icon 不再居中！

经过更多测试，我确定以下实现是使 jQuery ui-icon 居中的正确解决方案：

<td style="text-align: center;">
    <span style="display:inline-block;">
        <span class="ui-icon ui-icon-folder-collapsed"></span>
    </span>
</td>

很高兴我抓住了这一点！祝你好运

【讨论】：

【解决方案3】：

我只能建议问题来自跨度。它不是块元素。所以尝试添加这个 CSS 到它

background-position:center; 
display:inline-block;

这样，SPAN 将占据整个 TD，并且在这种情况下作为 SPAN 背景图像的图标将居中。

【讨论】：