एक सीएसएस चक्र

Question

में एक छवि केंद्र यह एक सीएसएस सर्कल में एक छवि है। मैं सर्कल को छवि के चारों ओर घूमना चाहता हूं ताकि छवि केंद्र में हो। मैं उसे कैसे कर सकता हूँ?

HTML:

<div class="circletag" id="nay"> 
    <img src="/images/no.png"> 
</div> 

सीएसएस:

div.circletag { 
    display: block; 
    width: 40px; 
    height: 40px; 
    background: #E6E7ED; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
} 
div.circletag.img { 

} 

Answer 1

पृष्ठभूमि छवि के रूप में छवि का उपयोग करें।

.circletag { 
    display: block; 
    width: 40px; 
    height: 40px; 
    background: #E6E7ED; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    background-image: url(no.png); 
    background-position:50% 50%; 
    background-repeat:no-repeat;  
} 

आप पूरे बाहरी div क्लिक किया जा सकता करने के लिए नहीं करना चाहते हैं, इस काम हो सकता है:

.circletag { 
    display: block; 
    width: 40px; 
    height: 40px; 
    background: #E6E7ED; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px;  
    text-align:center; 
} 

.circletag img{ 
    margin-top:7px; 
} 

Answer 2

लिखने इस

<div class="circletag" id="nay"> 
    <div style="padding-top: 7px;text-align: center;"><img src="/images/no.png"></div> 
</div> 

और

यह है div.circletag.img {}

इस div.circletag img {}

Answer 3

इसे जल्दी परीक्षण करने में असमर्थ की तरह है, लेकिन मुझे लगता है कि आप कुछ इस तरह की कोशिश करनी चाहिए:

div.circletag { 
    display: block; 
    width: 40px; 
    height: 40px; 
    background: #E6E7ED; 
    /* For now you can actually use 
    * plain border-radius 
    * 
    * -moz-border-radius: 20px; 
    * -webkit-border-radius: 20px; 
    */ 
    border-radius: 20px; 

    text-align: center; 
} 

div.circletag img { 
    line-height: 40px; 
} 

Answer 4

गोल div पर, text-align:center देने के लिए और गद्दी-टॉप जोड़ें। और नोट कि यदि आप पैडिंग जोड़ते हैं, आपको div की ऊंचाई को पुन: गणना करना होगा।

जांच यहाँ डेमो http://jsfiddle.net/fwQq4/

आखिरी बात .. display:block निर्दिष्ट करने के लिए आप की जरूरत नहीं है। केवल गोलाकार तत्व अवधि या एंकर है, तो केवल प्रदर्शन ब्लॉक का उपयोग करें।