Centrum align jQuery UI-ikona wewnątrz td

Question

Mam taką sprawę, używając gQGrid:

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

Jak mogę Canter to?

starałem się owinąć ją do div i wziął wraptocenter klasę stąd: 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> 

Ale to nie pomaga.

Jak mogę to zrobić przy minimalnych stylach CSS?

może określać margin-left byłoby łatwiejsze?

Answer 1

Mogę tylko zasugerować, że problem pochodzi z zakresu. To nie jest element blokowy. Więc spróbuj addign ten CSS do niego

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

ten sposób SPAN zajmie całą TD i ikonę, która jest obraz tła dla rozpiętości w tym przypadku będzie wyśrodkowany.

Answer 2

Podczas gdy to pytanie ma dziewięć miesięcy, kiedy piszę tę odpowiedź, mam nadzieję, że to rozwiązanie przynajmniej pomoże następnej osobie, która potrzebuje rozwiązać ten problem.

Pracuję z wtyczką jQuery DataTables i próbowałem znaleźć rozwiązanie tego problemu, gdy natrafiłem na tę stronę.

Próbowałem sugestię Yasen, które wdrożone jak pokazano tutaj:

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

Chociaż skupione ikonę, ikona nie był oczekiwany ikona.

Zamiast tego wyświetlana była prawa strona jednej ikony, lewa strona innej ikony i spacja między nimi.

Wyglądało na to, że okno oglądania przesunęło się na środek, ale źródło ikony interfejsu użytkownika pozostało nieruchome.

podstawie obserwacji, że użyłem trochę intuicji produkować następujące (ładnie sformatowane dla jasności):

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

Ta implementacja załatwiło sprawę!

EDIT:

Myślałem, że to wszystko, co było do niego, ale kiedy wróciłem do mojego kodu, zdałem sobie sprawę, że nie było jeszcze klasa zastosowana do mojego, który zawierał styl

text-align: center; 

Po usunięciu klasy z ikony ui nie było już wyśrodkowane!

Po trochę więcej testów, postanowiłem następującą realizację być poprawnym rozwiązaniem dla centrowania jQuery UI-ikony:

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

Cieszę się, że złapałem! Powodzenia

Answer 3

Spróbuj tego ...

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