मध्य संरेखित jQuery ui-आइकन टीडी

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> 

लेकिन यह मदद नहीं करता है।

मैं न्यूनतम सीएसएस शैलियों के साथ ऐसा कैसे कर सकता हूं?

निर्दिष्ट कर सकते हैं margin-left आसान होगा?

Answer 1

मैं केवल सुझाव दे सकता हूं कि समस्या अवधि से आती है। यह एक ब्लॉक तत्व नहीं है। तो इस तरह से स्पैन पूरे टीडी और आइकन जो इस मामले में स्पैन के लिए एक पृष्ठभूमि छवि केंद्रित हो जाएगा ले जाएगा यह

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

को यह सीएसएस addign प्रयास करें।

Answer 2

हालांकि यह प्रश्न नौ महीने पुराना है क्योंकि मैं यह उत्तर लिखता हूं, मुझे उम्मीद है कि यह समाधान कम से कम अगले व्यक्ति की मदद करेगा जिसने इस समस्या को हल करने की आवश्यकता है।

मैं jQuery डेटाटेबल प्लग-इन के साथ काम कर रहा हूं और इस पृष्ठ पर आने पर आज इस समस्या का हल ढूंढने का प्रयास कर रहा था।

मैं Yasen से सुझाव है, जैसा कि यहाँ दिखाया जो मैं कार्यान्वित करने की कोशिश की:

<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-आइकन केंद्रित के लिए सही समाधान हो:

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

खुशी है कि मुझे लगता है कि पकड़ा! गुड लक

Answer 3

इस प्रयास करें ...

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