ฉันจะจัด SVG ไว้ที่กึ่งกลางใน div ได้อย่างไร

ฉันมี SVG ที่ฉันพยายามจัดให้อยู่ในกอง div มีความกว้างหรือ 900px SVG มีความกว้าง 400px SVG มีการตั้งค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ ใช้งานไม่ได้มันแค่ทำหน้าที่ราวกับว่าระยะขอบด้านซ้ายเป็น 0 (ค่าเริ่มต้น)

ใครทราบข้อผิดพลาดของฉัน

SVG เป็นแบบอินไลน์ตามค่าเริ่มต้น เพิ่มdisplay: blockไปแล้วmargin: autoจะทำงานตามที่คาดไว้

คำตอบข้างต้นไม่ได้ผลสำหรับฉัน การเพิ่มแอททริบิวpreserveAspectRatio="xMidYMin"ไปยัง<svg>แท็กเป็นการหลอกลวง viewBoxความต้องการแอตทริบิวต์ต้องระบุสำหรับการทำงานได้เป็นอย่างดี ที่มา: เครือข่ายนักพัฒนา Mozilla

เมื่ออ่านข้างต้นแล้ว svg นั้นเป็นแบบอินไลน์โดยค่าเริ่มต้นฉันเพิ่งเพิ่มสิ่งต่อไปนี้ลงใน div:

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

และมันก็เป็นการหลอกลวงสำหรับฉัน

คนพิถีพิถันอาจไม่ชอบมัน (เป็นภาพไม่ใช่ข้อความ) แต่ในความคิดของฉัน HTML และ CSS เมาไปที่กึ่งกลางดังนั้นฉันคิดว่ามันเป็นธรรม

คำตอบเหล่านี้ไม่เหมาะกับฉัน นี่คือวิธีที่ฉันทำ

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

คำตอบข้างต้นดูไม่สมบูรณ์ขณะที่พวกเขากำลังพูดจากมุมมอง css เท่านั้น

การวางตำแหน่งของ svg ภายในวิวพอร์ตได้รับผลกระทบจากสองคุณลักษณะ svg

1. viewBox: กำหนดพื้นที่สี่เหลี่ยมผืนผ้าสำหรับ svg ที่จะครอบคลุม
2. อนุรักษ์AspectRatio: กำหนดตำแหน่งที่จะวาง viewBox wrt viewport และวิธีการสตรีมหาก viewport เปลี่ยนแปลง

ไปที่ลิงก์นี้จาก codepen เพื่อดูคำอธิบายโดยละเอียด

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

ฉันต้องใช้

display: inline-block;

ตรวจสอบให้แน่ใจว่า css ของคุณอ่านแล้ว:

margin: 0 auto;

แม้ว่าคุณกำลังพูดว่าคุณมีการตั้งค่าด้านซ้ายและขวาเป็นอัตโนมัติคุณอาจกำลังวางข้อผิดพลาด แน่นอนว่าเราไม่รู้เพราะคุณไม่ได้แสดงรหัสใด ๆ ให้เรา

คุณยังสามารถทำสิ่งนี้:

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

ใส่รหัสของคุณระหว่างนี้divหากคุณใช้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 เป็นอีกแนวทางหนึ่ง: เพิ่ม.container { display: flex; justify-content: center; }และเพิ่ม.containerคลาสให้กับ div ซึ่งมี svg ของคุณ

สำหรับผมการแก้ไขคือการเพิ่มลงในองค์ประกอบที่มีmargin: 0 auto;<svg>

แบบนี้:

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