Выровнять по центру jquery ui-icon внутри тд

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и пытался найти решение этой проблемы сегодня, когда натолкнулся на эту страницу.

Я попробовал предложение от Ясена, которое я реализовал, как показано здесь:

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

Хотя это по центру значок, значок не был ожидаемым значком.

Вместо этого отображалась правая сторона одного значка, левая сторона другого значка и расстояние между ними.

Казалось, что окно просмотра сместилось к центру, но источник значков пользовательского интерфейса остался неподвижным.

Основываясь на этом наблюдении, я использовал небольшую интуицию для получения следующего (красиво отформатированного дляясность):

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

Эта реализация сделала свое дело!

РЕДАКТИРОВАТЬ:

Я думал, что все было тамбыло до этого, но когда я вернулся к своему коду, я понял, что к моему классу все еще применяется класс, содержащий стиль

text-align: center;

Когда я удалил класс из, значок пользовательского интерфейса былбольше не по центру!

После небольшого тестирования я определил следующую реализацию как правильное решение для центрирования 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, в этом случае будет центрирован.