উত্তর:
এসভিজি ডিফল্টরূপে ইনলাইন। যোগ display: blockএটি এবং তারপর margin: autoআশানুরূপ কাজ হবে।
উপরের উত্তরগুলি আমার পক্ষে কার্যকর হয়নি। ট্যাগটিতে অ্যাট্রিবিউট যুক্ত preserveAspectRatio="xMidYMin"করা <svg>কৌতুকটি করেছে। এর viewBoxপাশাপাশি কাজ করার জন্য অ্যাট্রিবিউটটি নির্দিষ্ট করা দরকার। সূত্র: মজিলা বিকাশকারী নেটওয়ার্ক
.container { display: flex; justify-content: center; }এবং ডিভিতে। কনটেনার ক্লাস যুক্ত করুন যা আপনার এসভিজি।
ডিফল্টরূপে এস.জি.জি. ইনলাইন হ'ল উপরে পড়ে, আমি কেবল ডিভটিতে নিম্নলিখিতটি যুক্ত করেছি:
<div style="text-align:center;">এবং এটি আমার জন্য কৌশলটি করেছে।
পিউরিস্টরা এটি পছন্দ করতে পারে না (এটি কোনও চিত্র নয়, পাঠ্য নয়) তবে আমার মতে এইচটিএমএল এবং সিএসএস কেন্দ্রীকরণের উপর জড়িয়ে পড়েছে, তাই আমি মনে করি এটি ন্যায়সঙ্গত।
এই উত্তরগুলির কোনওোটাই আমার পক্ষে কাজ করেনি। এইভাবে আমি এটি করেছি।
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 100%
উপরের উত্তরগুলি অসম্পূর্ণ দেখায় কারণ তারা কেবল সিএসএস দৃষ্টিকোণ থেকে কথা বলছে।
ভিউপোর্টের মধ্যে এসভিজির অবস্থান দুটি এসভিজি বৈশিষ্ট্য দ্বারা প্রভাবিত হয়
বিস্তারিত বর্ণনার জন্য কোডেকেন থেকে এই লিঙ্কটি অনুসরণ করুন
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">আমাকে ব্যবহার করতে হয়েছিল
display: inline-block;আপনার সিএসএস পড়ে তা নিশ্চিত করুন:
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আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এর মধ্যে আপনার কোডটি রাখুন :
<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>
আমার জন্য, ফিক্সটি ছিল যুক্ত margin: 0 auto;উপাদানটিতে যুক্ত করা <svg>।
এটার মত:
<div style="margin: 0 auto">
<svg ...</svg>
</div>