html - How to make a centered, responsive CSS circle within a Boostrap div? -

नीचे JSfiddle देखें:

मेरे पक्ष में 3 कदम हैं, इसलिए माता-पिता & lt; div class = "col-xs-4" & gt; । प्रत्येक चरण को एक साफ चक्र की तरह दिखना चाहिए जो केंद्रित है (जिसे मैं आंतरिक डिवेल प्लेसमेंट के साथ हासिल करने की कोशिश कर रहा हूं) इसके अंदर किसी संख्या के साथ।

क्योंकि आपकी चौड़ाई अज्ञात है (100%), आप पैडिंग प्रतिशत का उपयोग करके ऊंचाई निर्धारित करना चाहते हैं, क्योंकि प्रतिशत पैडिंग की चौड़ाई से गणना की जाती है।

 < कोड> .circle {पृष्ठभूमि: # 515151; -मोझ-सीमा-त्रिज्या: 50%; -विबिट-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: अधिकतम; पाठ संरेखित करें: केंद्र; सफ़ेद रंग; चौड़ाई: 100%; padding-bottom: 100%; ऊंचाई: 0; स्थिति: रिश्तेदार; } .circle- कैप्शन {प्रदर्शन: ब्लॉक; बाएं: 0; ऊंचाई: 1 एएम; स्थिति: पूर्ण; सही: 0; शीर्ष: 50%; मार्जिन-टॉप: -5em; } & Lt; div class = "circle" id = "step-1-default-image-box" & gt; & Lt; span class = "circle-caption" & gt; 1 & lt; / span & gt; & Lt; / div & gt;  

ऊर्ध्वाधर केंद्रिंग इस के साथ मुश्किल हो जाती है, इसलिए आपको टेक्स्ट के चारों ओर एक और आवरण जोड़ना पड़ेगा, जो आप पूरी तरह से स्थिति में रख सकते हैं।

किसी और ने सिर्फ एक उत्तर जोड़ा यह और इसे हटा दिया, लेकिन मुझे लगता है कि ऐसा करने का सबसे अच्छा तरीका है।