আমি কীভাবে একটি ডিভের ভিতরে পাঠ্যকে কেন্দ্র করতে পারি (অনুভূমিকভাবে এবং উল্লম্বভাবে)

Ami Kibhabe Ekati Dibhera Bhitare Pathyake Kendra Karate Pari Anubhumikabhabe Ebam Ullambabhabe



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

এই পোস্টটি একটি ডিভের ভিতরে পাঠ্যটিকে উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত করার পদ্ধতিটি বর্ণনা করবে:







কিভাবে একটি div ভিতরে অনুভূমিকভাবে টেক্সট কেন্দ্রে?

একটি div-এর ভিতরে পাঠ্যকে অনুভূমিকভাবে কেন্দ্রীভূত করতে, প্রদত্ত পদ্ধতিটি দেখুন।



ধাপ 1: একটি ডিভ কন্টেইনার তৈরি করুন



প্রাথমিকভাবে, 'এর সাহায্যে একটি ডিভ কন্টেইনার তৈরি করুন

' উপাদান। তারপর, একটি ঢোকান ' আইডি ” div খোলার ট্যাগের ভিতরে অ্যাট্রিবিউট। এর পরে, div ট্যাগের মধ্যে কিছু পাঠ্য এম্বেড করুন:





< div আইডি = 'সারিবদ্ধ বিষয়বস্তু' >
লিনাক্সহিন্ট সেরা ওয়েবসাইটগুলির মধ্যে একটি জন্য বিষয়বস্তু তৈরি।
div >


আউটপুট


ধাপ 2: কেন্দ্র সারিবদ্ধ পাঠ্য থেকে div কন্টেইনার অ্যাক্সেস করুন



এখন, 'এর সাহায্যে div পাত্রে প্রবেশ করুন আইডি ' নির্বাচক সহ বৈশিষ্ট্যের নাম ' # এবং নিম্নলিখিত CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন:

#সারিবদ্ধ-সামগ্রী{
প্রস্থ: 80 % ;
মার্জিন: 0 স্বয়ংক্রিয়;
প্যাডিং: 20px;
পটভূমি: #c8edf3;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
রঙ: আরজিবি ( 49 , পনের , 240 ) ;
}


এখানে:

    • ' প্রস্থ ধারকটির প্রস্থের আকার নির্ধারণের জন্য সম্পত্তি ব্যবহার করা হয়।
    • ' মার্জিন ” পাত্রের বাইরে একটি ফাঁকা স্থান নির্দিষ্ট করে।
    • ' প্যাডিং ' উপাদানের সীমানার ভিতরে একটি স্থান সংজ্ঞায়িত করে।
    • ' পটভূমি ” উপাদানটির পিছনের দিকে পটভূমির রঙ সেট করে।
    • ' পাঠ্য-সারিবদ্ধ টেক্সটের সারিবদ্ধকরণ সেট করার জন্য সম্পত্তি ব্যবহার করা হয় ' কেন্দ্র
    • ' রঙ সীমার ভিতরে পাঠ্যের জন্য একটি রঙ নির্দিষ্ট করে।

এটি লক্ষ্য করা যায় যে আমরা তৈরি করা ডিভের ভিতরে অনুভূমিকভাবে সারিবদ্ধ পাঠ্যকে সফলভাবে কেন্দ্রীভূত করেছি:

কিভাবে একটি div ভিতরে টেক্সট উল্লম্বভাবে কেন্দ্রে?

একটি div পাত্রে উল্লম্বভাবে পাঠ্য কেন্দ্রীভূত করতে, প্রদত্ত নির্দেশাবলী অনুসরণ করুন।

ধাপ 1: div কন্টেইনার অ্যাক্সেস করুন

প্রথমত, তৈরি ডিভ কন্টেইনার অ্যাক্সেস করুন।

ধাপ 2: কেন্দ্র পাঠে উল্লম্বভাবে CSS বৈশিষ্ট্য প্রয়োগ করুন

তারপরে, নীচের তালিকাভুক্ত CSS বৈশিষ্ট্যগুলিকে একটি ডিভিতে উল্লম্বভাবে কেন্দ্রের পাঠ্যের জন্য প্রয়োগ করুন:

#সারিবদ্ধ-সামগ্রী{
প্রদর্শন: টেবিল-কোষ;
প্রস্থ: 300px;
উচ্চতা: 150px;
প্যাডিং: 10px;
রঙ: নীল;
ব্যাকগ্রাউন্ড-রঙ: rgb ( 248 , 215 , 166 ) ;
সীমানা: 3px ড্যাশ করা #f09d03;
উল্লম্ব-সারিবদ্ধ: মধ্যম;
}


উপরের কোড স্নিপেট অনুযায়ী:

    • স্থির কর ' প্রদর্শন ' যা উপাদানটির প্রদর্শন আচরণকে ' হিসাবে নির্দিষ্ট করে টেবিল-কোষ ”, যার মানে এটি div উপাদানের টেবিলের ঘরের মতো কাজ করে।
    • ' প্রস্থ ” সম্পত্তি উপাদান প্রস্থের আকার নির্দিষ্ট করে।
    • ' উচ্চতা ” উপাদানটির উচ্চতা নির্ধারণ করে।
    • ' প্যাডিং ” উপাদানের ভিতরে একটি ফাঁকা স্থান সংজ্ঞায়িত করে।
    • ' রঙ ” উপাদানটির ভিতরে পাঠ্যের রঙ সেট করার জন্য ব্যবহার করা হয়।
    • ' পেছনের রং ” উপাদানটির পিছনের রঙ নির্দিষ্ট করে।
    • ' সীমান্ত ' সম্পত্তি একটি উপাদানের একটি সীমানা সংজ্ঞায়িত করে।
    • ' উল্লম্ব-সারিবদ্ধ ' সম্পত্তি একটি সংজ্ঞায়িত উপাদানের উল্লম্ব প্রান্তিককরণ সেট করার জন্য ব্যবহার করা হয় ' মধ্যম

আউটপুট


আপনি উল্লম্ব এবং অনুভূমিক উভয় উপায়ে কন্টেইনারের ভিতরে পাঠ্যকে কেন্দ্র করার সম্পূর্ণ পদ্ধতি সম্পর্কে শিখেছেন।

উপসংহার

একটি div-এর ভিতরে টেক্সটটিকে উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত করতে, প্রথমে,

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