Tôi có một SVG mà tôi đang cố gắng căn giữa trong 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ó hoạt động như thể lề trái là 0 (mặc định).Làm cách nào để căn giữa SVG trong div?
Có ai biết lỗi của tôi không?
SVG là nội dòng theo mặc định. Thêm display: block vào nó và sau đó margin: auto sẽ hoạt động như mong đợi.
đả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ó các thiết lập trái và phải để tự động, bạn có thể đặt một lỗi. Tất nhiên chúng tôi sẽ không biết mặc dù bởi vì bạn đã không cho chúng tôi thấy bất kỳ mã nào.
Câu trả lời trên không hiệu quả đối với tôi. Thêm thuộc tính preserveAspectRatio="xMidYMin" vào thẻ <svg> đã thực hiện thủ thuật. Cần phải xác định thuộc tính viewBox để thuộc tính này hoạt động. Nguồn: Mozilla developer network
Không có câu trả lời nào trong số này phù hợp với 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%);
tôi không biết tại sao, nhưng tôi đã phải sử dụng 'trái: 100%' –
Sau khi đọc trên svg đó là inline theo mặc định, tôi chỉ cần thêm dòng sau vào div:
<div style="text-align:center;">
và nó đã làm các trick cho tôi.
Purists 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 hơi say lên và tập trung, vì vậy tôi nghĩ rằng đó là hợp lý.
tôi đã phải sử dụng
display: inline-block;
Đáp trên cái nhìn đầy đủ như họ đang nói từ điểm css chỉ xem.
vị trí của svg trong khung nhìn bị ảnh hưởng bởi hai svg thuộc tính
Follow this link from codepen for detailed description
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
này là nó. làm việc hoàn hảo cho tôi – warunanc
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>
Cảm ơn Martin, đã làm việc như một phép thuật! –
khá chắc chắn điều này cũng có nghĩa là text-align: center trên yếu tố phụ huynh sẽ làm việc quá (nó làm việc cho tôi trong Chrome anyway) – Nathan