Bagaimana cara memusatkan SVG di div?

Saya memiliki SVG yang saya coba pusatkan di div. Div memiliki lebar atau 900px. SVG memiliki lebar 400px. SVG memiliki margin-kiri dan margin-kanan yang diatur ke otomatis. Tidak berfungsi, itu hanya bertindak seolah-olah margin kiri adalah 0 (default).

Adakah yang tahu kesalahan saya?

SVG sebaris secara default. Tambahkan display: blockke sana dan kemudian margin: autoakan berfungsi seperti yang diharapkan.

Jawaban di atas tidak berhasil untuk saya. Menambahkan atribut preserveAspectRatio="xMidYMin"ke <svg>tag berhasil juga. The viewBoxatribut harus ditentukan untuk ini untuk bekerja juga. Sumber: jaringan pengembang Mozilla

Setelah membaca di atas bahwa svg inline secara default, saya baru saja menambahkan yang berikut ke div:

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

dan itu berhasil bagi saya.

Purist mungkin tidak menyukainya (ini adalah gambar, bukan teks) tetapi menurut saya HTML dan CSS kacau karena pemusatan, jadi saya pikir itu dibenarkan.

Tidak satu pun dari jawaban ini yang berhasil untuk saya. Beginilah cara saya melakukannya.

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

Jawaban di atas terlihat tidak lengkap karena mereka berbicara dari sudut pandang css saja.

posisi svg dalam viewport dipengaruhi oleh dua atribut svg

1. viewBox: mendefinisikan area persegi panjang untuk svg untuk menutupi.
2. preserveAspectRatio: didefinisikan di mana harus menempatkan viewBox wrt viewport dan cara strechnya jika viewport berubah.

Ikuti tautan ini dari codepen untuk deskripsi terperinci

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

Saya harus menggunakan

display: inline-block;

pastikan css Anda membaca:

margin: 0 auto;

Meskipun Anda mengatakan bahwa Anda memiliki set kiri dan kanan untuk otomatis, Anda mungkin menempatkan kesalahan. Tentu saja kami tidak akan tahu karena Anda tidak menunjukkan kode apa pun kepada kami.

Anda juga dapat melakukan ini:

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

Masukkan kode Anda di antara ini divjika Anda menggunakan bootstrap :

  <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 adalah pendekatan lain: tambahkan .container { display: flex; justify-content: center; }dan tambahkan .containerkelas ke div yang berisi svg Anda.

Bagi saya, perbaikannya adalah menambahkan margin: 0 auto;ke elemen yang mengandung <svg>.

Seperti ini:

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