Question

我有这种情况，使用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吗？

Answer 1

试试这个......

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

Answer 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>

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

Answer 3

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

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

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

中心在td内对齐jquery ui-icon

3 个答案: