मेरे पास एक एसवीजी है कि मैं एक div में केंद्र बनाने की कोशिश कर रहा हूं। Div की चौड़ाई या 900 पीएक्स है। एसवीजी की चौड़ाई 400 पीएक्स है। एसवीजी में मार्जिन-बाएं और मार्जिन-दाएं ऑटो पर सेट है। काम नहीं करता है, यह बस कार्य करता है जैसे बाएं हाशिए 0 (डिफ़ॉल्ट) है।मैं एक div में एक एसवीजी कैसे केंद्रित करूं?
कोई भी मेरी त्रुटि जानता है? भले ही आप कह रहे हैं आप ऑटो के लिए छोड़ दिया और सही सेट है, तो आपको एक त्रुटि रखकर किया जा सकता है
margin: 0 auto;
:
एसवीजी डिफ़ॉल्ट रूप से इनलाइन है। display: block इसमें जोड़ें और फिर margin: auto अपेक्षित काम करेगा।
सुनिश्चित करें कि आपके सीएसएस पढ़ता है बनाते हैं। बेशक हम नहीं जानते थे क्योंकि आपने हमें कोई कोड नहीं दिखाया था।
ऊपर दिए गए उत्तरों मेरे लिए काम नहीं करते थे। को <svg> टैग में विशेषता जोड़ने के दौरान चाल चल रही थी। viewBox विशेषता के लिए भी काम करने के लिए निर्दिष्ट करने की आवश्यकता है। स्रोत: Mozilla developer network
इनमें से कोई भी जवाब मेरे लिए काम नहीं करता है। मैंने इस तरह से इसे किया।
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
मुझे नहीं पता क्यों, लेकिन मुझे 'बाएं: 100%' –
कि svg उपरोक्त पढ़ लिया करने के बाद डिफ़ॉल्ट रूप से इनलाइन है, मैं सिर्फ div के लिए निम्न कहा:
<div style="text-align:center;">
और यह मेरे लिए चाल किया था।
पुरीस्ट इसे पसंद नहीं कर सकते हैं (यह एक छवि है, पाठ नहीं है) लेकिन मेरी राय में एचटीएमएल और सीएसएस खराब हो गया है और इसलिए मुझे लगता है कि यह उचित है।
मैं के रूप में वे केवल देखने के सीएसएस बिंदु से बात कर रहे हैं अधूरा देखो ऊपर
display: inline-block;
जवाब का उपयोग करने के लिए किया था। व्यूपोर्ट भीतर svg की
स्थिति दो svg से प्रभावित है विशेषताओं का
Follow this link from codepen for detailed description
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
का उपयोग करना था। मेरे लिए पूरी तरह से काम किया – warunanc
तुम भी ऐसा कर सकते हैं:
<center>
<div style="width: 40px; height: 40px;">
<svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
<use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
<svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
<path
d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
/>
</svg>
</use>
</svg>
</div>
</center>
धन्यवाद मार्टिन, एक जादू जादू की तरह काम किया! –
यकीन है कि यह भी मतलब है कि पाठ के अनुरूप: पेरेंट तत्व पर केंद्र भी काम करेगा (उस में मेरे लिए काम करता क्रोम वैसे भी) – Nathan