css আমি কিভাবে একটি div একটি SVG কেন্দ্র করবেন?




কিভাবে html তৈরি করা যায় (8)

আপনি এটি করতে পারেন:

<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 একটি প্রস্থ বা 900px আছে। এসভিজি 400 পিএক্স একটি প্রস্থ আছে। এসভিজি এর মার্জিন-বাম এবং মার্জিন-ডান স্বয়ং সেট আছে। কাজ করে না, বাম মার্জিনটি 0 (ডিফল্ট) হিসাবে কাজ করে।

যে কেউ আমার ভুল জানেন?


উপরোক্ত উত্তর আমার জন্য কাজ করে না। বৈশিষ্ট্যাবলী preserveAspectRatio="xMidYMin" হচ্ছে preserveAspectRatio="xMidYMin" <svg> ট্যাগে যদিও কৌশলটি ছিল। viewBox এ্যাট্রিবিউটের পাশাপাশি কাজ করার জন্য এটি নির্দিষ্ট করতে হবে। উত্স: মোজিলা ডেভেলপার নেটওয়ার্ক


যে svg ডিফল্টরূপে ইনলাইন উপরে পড়া হচ্ছে, আমি শুধু div যোগ নিম্নলিখিত:

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

এবং এটা আমার জন্য কৌশল ছিল।

Purists এটা পছন্দ করতে পারে না (এটি একটি ছবি, টেক্সট নয়) কিন্তু আমার মতে এইচটিএমএল এবং CSS কেন্দ্রীভূত উপর screwed, তাই আমি মনে করি এটা ন্যায্য।


আমি ব্যবহার ছিল

display: inline-block;

SVG ডিফল্টরূপে ইনলাইন হয়। display: block যোগ করুন display: block এটি display: block করুন এবং তারপরে margin: auto প্রত্যাশিত হিসাবে margin: auto কাজ করবে।


এই উত্তর কেউ আমার জন্য কাজ। এই আমি এটা কিভাবে।

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

উপরোক্ত উত্তরগুলি অসম্পূর্ণ দেখায় কারণ তারা কেবল CSS বিন্দু থেকে কথা বলে।

ভিউপোর্টের মধ্যে এসভিজি পজিশনিং দুটি svg বৈশিষ্ট্য দ্বারা প্রভাবিত হয়

  1. viewbox: SVG আবরণ জন্য আয়তক্ষেত্র এলাকা সংজ্ঞায়িত।
  2. preserveAspectRatio: ভিউবক্স wrt ভিউপোর্ট এবং কোথায় ভিউপোর্ট পরিবর্তন যদি এটি স্ট্রাইক করা হবে যেখানে সংজ্ঞায়িত।

বিস্তারিত বিবরণ জন্য কোডপেন থেকে এই লিঙ্ক অনুসরণ করুন

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

আপনি যদি বুটস্ট্র্যাপটি ব্যবহার করেন তবে আপনার div এই 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