मैं एक div में SVG को कैसे केंद्र करूँ?

252

मेरे पास एक एसवीजी है जिसे मैं एक div में केंद्रित करने की कोशिश कर रहा हूं। Div की चौड़ाई या 900px है। SVG की चौड़ाई 400px है। एसवीजी में ऑटो के लिए मार्जिन-लेफ्ट और मार्जिन-राइट सेट है। काम नहीं करता है, यह केवल कार्य करता है जैसे कि बाएं मार्जिन 0 (डिफ़ॉल्ट) है।

किसी को भी मेरी त्रुटि पता है?

— डॉन पी
स्रोत

459

एसवीजी डिफ़ॉल्ट रूप से इनलाइन है। इसमें जोड़ें display: blockऔर फिर margin: autoउम्मीद के मुताबिक काम करेंगे।

— स्पैडर शट
स्रोत

10

बहुत यकीन है कि इसका मतलब यह भी है कि पाठ-संरेखित करें: मूल तत्व पर केंद्र भी काम करेगा (यह वैसे भी क्रोम में मेरे लिए काम करता है)

— नाथन

29

उपरोक्त उत्तर मेरे काम नहीं आए। गुण जोड़ना preserveAspectRatio="xMidYMin"करने के लिए <svg>टैग चाल हालांकि किया था। इसके viewBoxसाथ ही काम करने के लिए विशेषता को निर्दिष्ट करने की आवश्यकता है। स्रोत: मोज़िला डेवलपर नेटवर्क

— Esger
स्रोत

7

मेरा वर्तमान दृष्टिकोण flexbox है। बस जोड़ें: .container { display: flex; justify-content: center; }और div .container वर्ग को अपने svg में जोड़ें।

— एगर

1

इस नए दृष्टिकोण के साथ एक और उत्तर जोड़ने पर विचार करें ताकि मैं इसे बढ़ा सकूं। आपकी सहायताके लिए धन्यवाद!

— क्रिस पीटर्स

24

ऊपर पढ़ा जा रहा है कि svg डिफ़ॉल्ट रूप से इनलाइन है, मैंने सिर्फ निम्नलिखित को div में जोड़ा:

<div style="text-align:center;">

और इसने मेरे लिए चाल चली।

शुद्धतावादी इसे पसंद नहीं कर सकते हैं (यह एक छवि है, पाठ नहीं) लेकिन मेरी राय में एचटीएमएल और सीएसएस ने इसे केंद्र में रखा है, इसलिए मुझे लगता है कि यह उचित है।

— डेविड
स्रोत

इसके लिए धन्यवाद। सरल और प्रभावी। व्यूपोर्ट और व्यूबॉक्स के साथ खिलवाड़ के लिए पागल हो रहा है। यह सेकंड में चाल चली। बस एक div में बेवकूफ बात लपेटो और इसे केंद्र।

— अनोन 58192932

@ anon58192932 - आपका बहुत बहुत स्वागत है। यह मूर्खतापूर्ण सरल है, लेकिन यह संतोषजनक है कि इसका उपयोग दूसरों के लिए भी है क्योंकि मैंने यहाँ सवालों के इतने अधिक परिष्कृत उत्तर से लाभ उठाया है।

— डेविड

20

इनमें से किसी भी जवाब ने मेरे लिए काम नहीं किया। मैंने इस तरह से इसे किया।

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

— रयान
स्रोत

3

मुझे पता नहीं क्यों, लेकिन मुझे इस्तेमाल करना थाleft: 100%

— लुइस डेसचैम्प्स रूड

16

उपरोक्त उत्तर अधूरे दिखते हैं क्योंकि वे सीएसएस दृष्टिकोण से ही बात कर रहे हैं।

व्यूपोर्ट के भीतर svg की स्थिति दो svg विशेषताओं से प्रभावित होती है

व्यूबॉक्स: कवर करने के लिए svg के लिए आयत क्षेत्र को परिभाषित करता है।
preserveAspectRatio: व्यूबॉक्स wrt व्यूपोर्ट को रखने के लिए परिभाषित किया गया है और व्यूपोर्ट में बदलाव होने पर इसे कैसे स्ट्रेच किया जाए।

विस्तृत विवरण के लिए कोडपेन के इस लिंक का अनुसरण करें

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

— शिशिर अरोड़ा
स्रोत

6

मुझे इस्तेमाल करना था

display: inline-block;

— जोआना श्वेइगर
स्रोत

4

सुनिश्चित करें कि आपका सीएसएस पढ़ता है:

margin: 0 auto;

यद्यपि आप कह रहे हैं कि आपके पास बाएँ और दाएँ सेट ऑटो है, तो आप एक त्रुटि दे सकते हैं। बेशक हमें नहीं पता होगा क्योंकि आपने हमें कोई कोड नहीं दिखाया था।

— माइकल रेडर
स्रोत

3

आप यह भी कर सकते हैं:

<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>

— मार्टिन लॉयड जोस
स्रोत

2

divयदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो इस बीच अपना कोड डालें :

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

— उज़ैर अहमद
स्रोत

2

Flexbox एक और दृष्टिकोण है: .container { display: flex; justify-content: center; }उस .containerवर्ग को जोड़ें और जोड़ें जिसमें आपका svg शामिल है।

— Esger
स्रोत

0

मेरे लिए, फिक्स में margin: 0 auto;उस तत्व को जोड़ना था <svg>।

ऐशे ही:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

— कोलिन क्रॉल
स्रोत