Làm cách nào để tôi căn giữa một SVG trong div?

Tôi có một SVG mà tôi đang cố gắng tập trung vào một div. Div có chiều rộng hoặc 900px. SVG có chiều rộng 400px. SVG có lề trái và lề phải được đặt thành tự động. Không hoạt động, nó chỉ hoạt động như thể lề trái là 0 (mặc định).

Có ai biết lỗi của tôi không?

SVG là nội tuyến theo mặc định. Thêm display: blockvào nó và sau đó margin: autosẽ làm việc như mong đợi.

Câu trả lời trên không làm việc cho tôi. Thêm thuộc tính preserveAspectRatio="xMidYMin"vào <svg>thẻ đã làm thủ thuật mặc dù. Các viewBoxthuộc tính cần được quy định cho việc này đến công việc là tốt. Nguồn: Mạng lưới nhà phát triển Mozilla

Đã đọc ở trên rằng Svg là nội tuyến theo mặc định, tôi chỉ cần thêm vào sau đây cho div:

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

và nó đã lừa tôi

Những người theo chủ nghĩa thuần túy có thể không thích nó (đó là một hình ảnh, không phải văn bản) nhưng theo ý kiến ​​của tôi, HTML và CSS đã làm rối tung việc định tâm, vì vậy tôi nghĩ rằng nó hợp lý.

Không có câu trả lời nào trong số này làm việc cho tôi. Đây là cách tôi đã làm nó.

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

Câu trả lời ở trên trông không đầy đủ vì họ chỉ nói từ quan điểm css.

định vị của Svg trong chế độ xem bị ảnh hưởng bởi hai thuộc tính svg

1. viewBox: xác định vùng hình chữ nhật cho svg để che.
2. reservedAspectRatio: được xác định vị trí đặt khung nhìn viewBox wrt và cách strech nó nếu khung nhìn thay đổi.

Theo liên kết này từ codepen để mô tả chi tiết

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

Tôi đã phải sử dụng

display: inline-block;

đảm bảo css của bạn đọc:

margin: 0 auto;

Mặc dù bạn đang nói rằng bạn có chế độ tự động trái và phải được đặt thành tự động, bạn có thể đang gặp lỗi. Tất nhiên, chúng tôi sẽ không biết vì bạn đã không cho chúng tôi xem bất kỳ mã nào.

Bạn cũng có thể làm điều này:

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

Đặt mã của bạn vào giữa này divnếu bạn đang sử dụng 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 là một cách tiếp cận khác: thêm .container { display: flex; justify-content: center; }và thêm .containerlớp vào div chứa svg của bạn.

Đối với tôi, cách khắc phục là thêm margin: 0 auto;vào phần tử chứa <svg>.

Như thế này:

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