Bir SVG'yi div içinde nasıl merkezlerim?

Bir div'de merkezlemeye çalıştığım bir SVG'm var. Div'in genişliği veya 900 pikseldir. SVG'nin genişliği 400 pikseldir. SVG'nin kenar boşluğu ve kenar boşluğu otomatik olarak ayarlanmıştır. Çalışmıyor, sadece sol kenar boşluğu 0 (varsayılan) gibi davranıyor.

Benim hatamı bilen var mı?

SVG varsayılan olarak satır içi şeklindedir. display: blockOna ekleyin ve margin: autobeklendiği gibi çalışın.

Yukarıdaki cevaplar benim için işe yaramadı. Özelliğin eklenmesi preserveAspectRatio="xMidYMin"için <svg>etiketi hile olsa yaptı. Bunun viewBoxda çalışması için özelliğin belirtilmesi gerekir. Kaynak: Mozilla geliştirici ağı

Yukarıdaki svg varsayılan olarak satır içi okuduktan sonra ben sadece div aşağıdaki ekledi:

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

ve bu benim için hile yaptı.

Puristler bundan hoşlanmayabilir (bu bir resim değil, metin değil) ama bence HTML ve CSS merkezleme üzerine sıkışmış, bu yüzden haklı olduğunu düşünüyorum.

Bu cevapların hiçbiri benim için işe yaramadı. Ben böyle yaptım.

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

Yukarıdaki yanıtlar yalnızca css açısından konuşurken eksik görünüyor.

svg'nin görünüm alanı içindeki konumu iki svg özelliğinden etkilenir

1. viewBox: svg'nin kapsayacağı dikdörtgen alanı tanımlar.
2. preserveAspectRatio: viewBox wrt görünüm penceresinin nereye yerleştirileceği ve görünüm değiştiğinde nasıl gerileceği.

Ayrıntılı açıklama için kod bağlantısından bu bağlantıyı izleyin

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

Kullanmak zorundaydım

display: inline-block;

css'nizin şunları okuduğundan emin olun:

margin: 0 auto;

Sol ve sağın otomatik olarak ayarlandığını söyleseniz bile, bir hata veriyor olabilirsiniz. Elbette bilmiyorduk çünkü bize herhangi bir kod göstermediniz.

Bunu da yapabilirsiniz:

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

Bootstrapdiv kullanıyorsanız kodunuzu bu alana yerleştirin :

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

Flexbox başka bir yaklaşımdır: svg'nizi içeren div'e sınıfı ekleyin .container { display: flex; justify-content: center; }ve ekleyin .container.

Benim için düzeltme, margin: 0 auto;içeren öğeye eklemekti <svg>.

Bunun gibi:

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