Center align jquery-ui-Symbol in td

Ich habe einen solchen Fall, mit gQGrid:

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

Wie kann ich es canter?

war ich versucht, wickeln Sie es in div und nahm wraptocenter Klasse von hier: 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>

Aber es wird nicht helfen.

Wie kann ich tun, das mit minimalen css-Stile?

kann angeben werden margin-left wäre einfacher?

InformationsquelleAutor Joper | 2011-07-20

Versuchen, diese...

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

InformationsquelleAutor Clarence Brown

2

Während diese Frage ist neun Monate alt, als ich Schreibe diese Antwort, ich hoffe, diese Lösung wird zumindest helfen, die nächste person, die Sie braucht um dieses problem zu lösen.

Arbeite ich mit der jQuery-dataTables-plug-in und war auf der Suche nach einer Lösung für dieses problem heute als ich kam auf diese Seite.

Habe ich versucht den Vorschlag von Yasen, die ich umgesetzt habe, wie hier gezeigt:
```
<td></td>
```
Während dieser zentriert das Symbol, das Symbol war nicht das erwartete Symbol.

Statt, was angezeigt wurde, war der rechten Seite ein Symbol, das Links ein weiteres Symbol, und der Raum zwischen Ihnen.

Schien es, dass das Sichtfenster hatte, zog in die Mitte, aber der ui-icon-Quelle blieb stationär.

Basiert, dass die Beobachtung, die ich verwendet, ein wenig intuition, um die folgende (schön formatiert für Klarheit):
```
<td>
 
 
 
</td>
```
~~Diese Implementierung hat den trick!~~

EDIT:

Ich dachte, das war alles, aber wenn ich zurück zu meinem code, ich erkannte, dass es noch eine Klasse angewendet, um meine, die den Stil
```
text-align: center;
```
Wenn ich entfernt die Klasse aus , die ui-icon war nicht mehr zentriert!

Nach ein wenig mehr testen, da ich bestimmt die folgende Implementierung der richtigen Lösung für die Zentrierung ein jQuery-ui-Symbol:
```
<td style="text-align: center;">
 
 
 
</td>
```
Froh, dass ich gefangen! Viel Glück

InformationsquelleAutor jimmym715
0

Kann ich nur vermuten, dass das problem kommt von der span. Es ist nicht ein block-element. So versuchen addign diese CSS
```
background-position:center; 
display:inline-block;
```
Diese Weise die SPANNE den gesamten TD und die Symbol, das ist ein hintergrund Bild für die SPANNE in diesem Fall zentriert.

InformationsquelleAutor Yasen Zhelev

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.