居中對齊jQuery UI的圖標內TD

我有這樣的情況下，使用gQGrid：居中對齊jQuery UI的圖標內TD

<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會更容易嗎？

來源

2011-07-20 Joper

我只能建議問題來自跨度。它不是一個塊元素。所以這個CSS嘗試addign它

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

這樣的SPAN將整個TD和它是在這種情況下，SPAN背景圖像將居中的圖標。

來源

2011-07-20 16:05:14

雖然這個問題在我寫這個答案的九個月前，我希望這個解決方案至少可以幫助下一個需要解決這個問題的人。

我正在使用jQuery dataTables插件，並且當我登錄此頁面時，試圖在今天找到此問題的解決方案。

我試圖從海雅森的建議，這是我實現，如下所示：

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

雖然這居中圖標，該圖標是不是預期的圖標。

而是顯示的是一個圖標的右側，另一個圖標的左側以及它們之間的空間。

看起來窗口已經移動到中心，但UI圖標源保持靜止。

基於這種看法，我用了一點直覺產生以下（良好格式化爲清晰起見）：

<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用戶界面圖標正確的解決方案：

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

很高興我抓住的！祝你好運

來源

2012-04-20 17:50:37 jimmym715

嘗試......

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

來源

2013-01-28 15:15:26

居中對齊jQuery UI的圖標內TD

回答

相關問題