এইচটিএমএল এবং সিএসএস সহ একটি DIV-এ একটি চিত্রকে কীভাবে কেন্দ্রীভূত করতে হয় তা শিখুন

আপনি কিভাবে জানতে চান একটি DIV-এ একটি চিত্র কেন্দ্রে রাখুন? একটি DIV-তে একটি চিত্র কেন্দ্রীভূত করা আপনার ওয়েব পৃষ্ঠার চেহারা এবং সংগঠন উন্নত করতে এবং আপনি যে ছবিটি প্রদর্শন করতে চান তা হাইলাইট করতে কার্যকর হতে পারে৷ একটি DIV এ একটি চিত্র কেন্দ্রে রাখুন কঠিন নয়, কিন্তু এটি বিভিন্ন বিষয়ের উপর নির্ভর করে, যেমন ছবির ধরন, DIV-এর আকার, DIV-এর শৈলী ইত্যাদি।

এই নিবন্ধে আমরা ব্যাখ্যা করব এইচটিএমএল এবং সিএসএস ব্যবহার করে কীভাবে একটি ডিভি-তে একটি চিত্রকে কেন্দ্রীভূত করবেন, যা ওয়েব পেজ তৈরি এবং ডিজাইন করতে ব্যবহৃত প্রোগ্রামিং ভাষা। আমরা আপনাকে বেশ কয়েকটি পদ্ধতি এবং উদাহরণ দেখাতে যাচ্ছি যাতে আপনি আপনার জন্য সবচেয়ে উপযুক্ত একটি বেছে নিতে পারেন।

একটি DIV কি

একটি div একটি HTML উপাদান যা ব্যবহার করা হয় একটি ওয়েব পৃষ্ঠায় বিভাগ বা পাত্র তৈরি করুন. এতে অন্যান্য উপাদান থাকতে পারে, যেমন টেক্সট, ছবি, লিঙ্ক ইত্যাদি। এছাড়াও এটি একটি ব্লক উপাদান, যার মানে এটি পৃষ্ঠার পুরো প্রস্থ এবং এটিকে নেয় আপনি এর উচ্চতা এবং প্রস্থ নির্ধারণ করতে পারেন. একটি ডিভ একটি জেনেরিক উপাদান, যার অর্থ এটির কোন নির্দিষ্ট শব্দার্থিক অর্থ নেই। এই কারণে, এটি সাধারণত ক্লাস বা আইডি বৈশিষ্ট্যগুলির সাথে ব্যবহার করা হয়, div-কে একটি নাম বা একটি বিভাগ দিতে। এটি প্রায়ই সঙ্গে ব্যবহার করা হয় শৈলী বৈশিষ্ট্য বা CSS স্টাইল শীট সহ, div একটি চেহারা বা নকশা দিতে.

একটি div একটি ওয়েব পৃষ্ঠার বিষয়বস্তু সংগঠিত এবং গঠন করতে এবং এটিতে শৈলী বৈশিষ্ট্য প্রয়োগ করতে ব্যবহৃত হয়। একটি div দিয়ে আপনি একটি বাক্স তৈরি করতে পারেন যাতে অন্যান্য উপাদান রয়েছে এবং এটি সারিবদ্ধ, কেন্দ্রীভূত, রঙিন, ছায়াযুক্ত ইত্যাদি হতে পারে। বিন্যাস এছাড়াও ব্যবহার করা যেতে পারে কলাম বা সারি তৈরি করুন, একটি সুশৃঙ্খল এবং নমনীয় উপায়ে বিষয়বস্তু বিতরণ করতে। সাধারণভাবে এটি ভিজ্যুয়াল বা ইন্টারেক্টিভ ইফেক্ট তৈরি করতেও ব্যবহার করা যেতে পারে, যেমন অ্যানিমেশন, ট্রানজিশন, ট্রান্সফরমেশন ইত্যাদি।

কিভাবে একটি ছবি অনুভূমিকভাবে কেন্দ্রীভূত করবেন

একটি DIV এ একটি চিত্রকে অনুভূমিকভাবে কেন্দ্রে রাখুন মানে কেন্দ্রে ছবিটি সারিবদ্ধ করুন DIV এর প্রস্থ। এটি করার বিভিন্ন উপায় রয়েছে, তবে সবচেয়ে সাধারণ নিম্নলিখিতগুলি হল:

• টেক্সট-সারিবদ্ধ: কেন্দ্র সম্পত্তি ব্যবহার করে. এই বৈশিষ্ট্যটি DIV উপাদানে প্রয়োগ করা হয় এবং DIV-এর মধ্যে সমস্ত উপাদানকে কেন্দ্রে অনুভূমিকভাবে সারিবদ্ধ করে। উদাহরণ স্বরূপ:

• মার্জিন সম্পত্তি ব্যবহার করে: স্বয়ংক্রিয়. এই বৈশিষ্ট্যটি IMG উপাদানে প্রয়োগ করা হয় এবং ছবিটিকে অনুভূমিকভাবে কেন্দ্র করে একই বাম এবং ডান মার্জিন তৈরি করে। এটি কাজ করার জন্য, চিত্রটির একটি সংজ্ঞায়িত প্রস্থ থাকতে হবে এবং ব্লক টাইপ হতে হবে বা সম্পত্তি প্রদর্শন: ব্লক থাকতে হবে। উদাহরণ স্বরূপ:

• রূপান্তর সম্পত্তি ব্যবহার করে: translateX(). এই বৈশিষ্ট্যটি আইএমজি উপাদানে প্রয়োগ করা হয় এবং চিত্রটিকে তার আসল অবস্থান থেকে একটি নির্দিষ্ট দূরত্বে অনুভূমিকভাবে সরাতে দেয়। এটিকে অনুভূমিকভাবে কেন্দ্রে রাখতে, আপনাকে এটির প্রস্থের 50% ডানদিকে সরাতে হবে। এটি কাজ করার জন্য, চিত্রটির একটি সংজ্ঞায়িত প্রস্থ থাকতে হবে এবং ব্লক টাইপ হতে হবে বা সম্পত্তি প্রদর্শন: ব্লক থাকতে হবে। উদাহরণ স্বরূপ:

কিভাবে উল্লম্বভাবে একটি ছবি কেন্দ্রে

একটি DIV এ একটি চিত্রকে উল্লম্বভাবে কেন্দ্রে রাখুন মানে DIV এর উচ্চতার কেন্দ্রে চিত্রটিকে সারিবদ্ধ করুন. এটি করার বিভিন্ন উপায় রয়েছে, তবে সবচেয়ে সাধারণ নিম্নলিখিতগুলি হল:

• উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্য ব্যবহার করে: মধ্যম. এই বৈশিষ্ট্যটি IMG উপাদানে প্রয়োগ করা হয় এবং টেক্সট বেসলাইনের সাপেক্ষে ছবিটিকে কেন্দ্রে উল্লম্বভাবে সারিবদ্ধ করে। কাজ করার জন্য, DIV উপাদানটির একটি নির্দিষ্ট উচ্চতা থাকতে হবে এবং IMG উপাদানটি অবশ্যই ইনলাইন টাইপের হতে হবে বা প্রদর্শন: ইনলাইন সম্পত্তি থাকতে হবে। উদাহরণ স্বরূপ:

• মার্জিন-টপ এবং মার্জিন-বটম প্রপার্টি ব্যবহার করুন. এই বৈশিষ্ট্যগুলি আইএমজি উপাদানে প্রয়োগ করা হয় এবং চিত্রটির উপরের এবং নীচে একই মার্জিন তৈরি করে, যা এটিকে উল্লম্বভাবে কেন্দ্র করে। এটি কাজ করার জন্য, DIV উপাদানটির একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং IMG উপাদানটির অবশ্যই একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং ব্লক টাইপ হতে হবে বা প্রদর্শন: ব্লক প্রপার্টি থাকতে হবে। উদাহরণ স্বরূপ:

• রূপান্তর সম্পত্তি ব্যবহার করে: translateY(). এই সময় এটি আইএমজি উপাদানে প্রয়োগ করা হয় এবং চিত্রটিকে তার আসল অবস্থান থেকে একটি নির্দিষ্ট দূরত্বে উল্লম্বভাবে সরাতে দেয়। এটিকে উল্লম্বভাবে কেন্দ্রে রাখতে, আপনাকে এটির উচ্চতার 50% নীচের দিকে সরাতে হবে। কাজ করার জন্য, DIV উপাদানটির একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং IMG উপাদানটির অবশ্যই একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং ব্লক টাইপের হতে হবে বা প্রদর্শন: ব্লক প্রপার্টি থাকতে হবে। উদাহরণ স্বরূপ:

কিভাবে উভয় অক্ষে একটি ছবি কেন্দ্রীভূত করা যায়

একটি DIV-এ উভয় অক্ষে একটি চিত্রকে কেন্দ্রীভূত করার অর্থ হল প্রস্থ এবং উচ্চতা উভয়ের মাঝখানে চিত্রটিকে সারিবদ্ধ করুন DIV এর মধ্যে, এটি সবচেয়ে জটিল। এটি করার বিভিন্ন উপায় রয়েছে, তবে সবচেয়ে সাধারণ নিম্নলিখিতগুলি হল:

• টেক্সট-সারিবদ্ধ: কেন্দ্র সম্পত্তি এবং উল্লম্ব-সারিবদ্ধ: মধ্য সম্পত্তি ব্যবহার করে. এই বৈশিষ্ট্যগুলি যথাক্রমে DIV উপাদান এবং IMG উপাদানগুলিতে প্রযোজ্য, এবং চিত্রটিকে কেন্দ্রে অনুভূমিক এবং উল্লম্বভাবে সারিবদ্ধ করে। কাজ করার জন্য, DIV উপাদানটির একটি নির্দিষ্ট উচ্চতা থাকতে হবে এবং IMG উপাদানটি অবশ্যই ইনলাইন টাইপের হতে হবে বা প্রদর্শন: ইনলাইন সম্পত্তি থাকতে হবে। উদাহরণ স্বরূপ:

• মার্জিন সম্পত্তি ব্যবহার করে: স্বয়ংক্রিয়. এখানে এটি আইএমজি উপাদানে প্রয়োগ করা হয় এবং উভয় অক্ষের উপর কেন্দ্র করে ছবিটির চার দিকে সমান মার্জিন থাকে। কাজ করার জন্য, DIV উপাদানটির একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং IMG উপাদানটির অবশ্যই একটি সংজ্ঞায়িত প্রস্থ এবং উচ্চতা থাকতে হবে এবং ব্লক টাইপের হতে হবে বা প্রদর্শন: ব্লক সম্পত্তি থাকতে হবে। উদাহরণ স্বরূপ:

• রূপান্তর সম্পত্তি ব্যবহার করে: translate(). এই ক্ষেত্রে এটি আইএমজি উপাদানে প্রয়োগ করা হয় এবং উভয় অক্ষে ছবিটিকে তার আসল অবস্থান থেকে একটি নির্দিষ্ট দূরত্বে সরানোর কারণ হয়। এটিকে কেন্দ্রীভূত করতে, আপনাকে এটির প্রস্থের 50% ডানদিকে এবং উচ্চতার 50% নীচে নিয়ে যেতে হবে। কাজ করার জন্য, DIV উপাদানটির একটি সংজ্ঞায়িত উচ্চতা থাকতে হবে এবং IMG উপাদানটির অবশ্যই একটি সংজ্ঞায়িত প্রস্থ এবং উচ্চতা থাকতে হবে এবং ব্লক টাইপের হতে হবে বা প্রদর্শন: ব্লক সম্পত্তি থাকতে হবে। উদাহরণ স্বরূপ:

যে কোনো ছবি কেন্দ্রে

একটি DIV-তে একটি চিত্র কেন্দ্রীভূত করা দরকারী হতে পারে আপনার ওয়েবসাইটের চেহারা এবং সংগঠন উন্নত করতে, এবং আপনি যে ছবিটি প্রদর্শন করতে চান তা হাইলাইট করতে। একটি DIV-তে একটি চিত্রকে কেন্দ্রীভূত করা কঠিন নয়, তবে এটি বিভিন্ন কারণের উপর নির্ভর করে যেমন ছবির ধরন, DIV-এর আকার, DIV-এর শৈলী ইত্যাদি।

এই নিবন্ধে আমরা ব্যাখ্যা করেছি কিভাবে এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি DIV-তে একটি চিত্রকে কেন্দ্রীভূত করতে হয়, যা ওয়েব পেজ তৈরি এবং ডিজাইন করতে ব্যবহৃত প্রোগ্রামিং ভাষা। আপনার থেকে বেছে নেওয়ার জন্য আমরা আপনাকে বিভিন্ন পদ্ধতি এবং উদাহরণ দেখিয়েছি। আপনার পক্ষে সবচেয়ে উপযুক্ত এটি।

আমরা আশা করি আপনি এই নিবন্ধটি পছন্দ করেছেন এবং আপনি শিখেছেন কিভাবে একটি DIV-তে একটি চিত্র কেন্দ্রীভূত করতে হয়। আপনার যদি কোন প্রশ্ন বা পরামর্শ থাকে, আমাদের একটি মন্তব্য করুন. এছাড়াও আপনি এই নিবন্ধটি আপনার বন্ধু বা পরিবারের সাথে শেয়ার করতে পারেন যারা পছন্দ করেন এইচটিএমএল বা সিএসএস. এর কাজ এবং প্রোগ্রাম পেতে চলুন!