CSS কৌশল - একটি চিত্রকে কেন্দ্র করে

আজ আমরা একটি সুসুওয়াটারি কেন্দ্রে করার চেষ্টা করব . এই ছোট প্রাণীগুলিকে সাধারণত 'সটস' বলা হয় অনেক ঘুরে বেড়াতে পছন্দ করে তাই আমাদের স্থির এবং কেন্দ্রে থাকতে হবে যাতে আমরা তাদের এক বা একাধিক ছবি তুলতে পারি। এটা করা যাক!

দ্রষ্টব্য:আপনি পড়ার সাথে সাথে, অনুগ্রহ করে ব্লগের রেপো দেখুন৷

৷

এইচটিএমএল-এ আমাদের ছবি যোগ করা হচ্ছে

একটি চিত্র কেন্দ্রীভূত করার প্রয়োজন খুবই সাধারণ। ধরা যাক আমাদের স্যুট ইমেজ আছে এবং আমরা এটিকে প্রচলিত image দিয়ে যোগ করি ট্যাগ:

<img class="soot" src="soot.jpg" alt="soot!">

ভুলে যাবেন না:আপনার ইমেজ ট্যাগ লেখার সময় মনে রাখবেন যে এই ট্যাগে কোনো চাইল্ড নোড থাকতে পারে না, তাই আমরা এটি বন্ধ করি না। যদিও আপনার ব্রাউজার যদি </img> বন্ধ থাকে তাহলে অভিযোগ নাও করতে পারে , এটিতে প্রয়োগ করা কোনো CSS কাজ নাও করতে পারে। তাই শুধু উপরের নিয়ম অনুসরণ করুন।

এখন, আমরা কোনো সিএসএস ছাড়াই আমাদের ছবি যুক্ত করার সাথে সাথেই আমাদের পেজে চিত্রটি এরকম দেখাবে:

এর কারণ হল আমাদের ছবিটি পৃষ্ঠার ডিফল্ট প্রবাহ অনুযায়ী অবস্থান করা হয়েছে, এই ক্ষেত্রে বাম দিকে, আমাদের শিরোনামের মতোই৷

কেন্দ্রীকরণ পদ্ধতি 1: মার্জিন:0 স্বয়ংক্রিয়

আমাদের কাঁচকে কেন্দ্রীভূত করার সবচেয়ে সহজ উপায় হল আমাদের img-এ নিম্নলিখিত স্টাইলিং প্রয়োগ করা নির্বাচক:

img.soot {
  margin: 0 auto;
  display: block;
}

এখানে আমরা আমাদের চিত্র নির্বাচকের সাথে আরও নির্দিষ্টতার জন্য ক্লাসের নাম যুক্ত করছি যদি আমরা আরও কাঁটা যোগ করি, আমাদের নিশ্চিত করতে হবে যে সেগুলি কেন্দ্রীভূত হয়৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

তাই এখন আমাদের পৃষ্ঠাটি পরীক্ষা করা যাক হ্যাঁ, আমাদের ছবিটি কেন্দ্রীভূত করা হয়েছে!

তাহলে কি হয়েছে?

আমাদের margin attribute চারটি প্যারামিটার গ্রহণ করতে পারে, প্রথম দুটি উপরে এবং নীচে এবং অন্যটি বাম এবং ডান। এখানে আমরা মূলত ব্রাউজারকে বাম এবং ডান মার্জিন নির্ধারণ করতে বলছি, যা এই ক্ষেত্রে ব্রাউজার তাদের সমান সেট করে এবং এইভাবে ছবিটি কেন্দ্রীভূত হয়।
আমাদের display সম্পত্তির অনেক মান থাকতে পারে। এই ক্ষেত্রে আমরা 'ব্লক' নির্বাচন করি যা মূলত img উপাদান টি
o পুরো প্রস্থ এবং তার নিজস্ব লাইনে নিন। সুতরাং যখন আমরা মার্জিন প্রয়োগ করি তখন আমরা নিশ্চিত করি যে এটি পুরো ছবির প্রস্থে প্রয়োগ করা হয়েছে যাতে এটি কেন্দ্রীভূত হয়৷

কেন্দ্রীকরণ পদ্ধতি 2: টেক্সট-সারিবদ্ধ:কেন্দ্র;

আমরা আমাদের কালিকে একটি মূল উপাদানের ভিতরে রেখে কেন্দ্রীভূত করতে পারি। চলুন একটি div বলি এবং তারপরে শুধু অভিভাবকের উপর পাঠ্য-সারিবদ্ধ করুন। আমাদের ছবিটি সারিবদ্ধ করতে নিশ্চিত করুন যে আপনি এটিকে মূল উপাদানে যুক্ত করেছেন (প্রায়শই ধারক উপাদান হিসাবে উল্লেখ করা হয়):

.container {
    text-align: center;
}

আমাদের div হিসাবে উপাদানটি প্রকৃতিগতভাবে একটি ব্লক কন্টেইনার, এটি পুরো প্রস্থ গ্রহণ করবে এবং এর বাচ্চাদের কেন্দ্রে থাকবে এই ক্ষেত্রে আমাদের স্যুট ইমেজ!

উপসংহার

সুসুওয়াতারি উচ্চারণ করা মুখের মত বলে মনে হচ্ছে (শুধু এটি অনেকবার বলার কল্পনা করুন)। অন্যদিকে, চিত্রগুলিকে কেন্দ্র করে, এটি আসলে বেশ সহজ ডান!