একটি টেক্সট সহজেই যেকোনো জায়গায় যোগ করা যেতে পারে, কিন্তু প্রান্তিককরণ ছাড়া, এটি অপ্রস্তুত এবং কম আকর্ষণীয় দেখাতে পারে। সংযুক্ত টেক্সট একটি ওয়েব পৃষ্ঠার পুরো চেহারা বিরক্ত করতে পারে. ওয়েব অ্যাপ্লিকেশনগুলিতে এই জাতীয় জিনিসগুলি মোকাবেলা করার জন্য, আমরা CSS এর কিছু দরকারী বৈশিষ্ট্য ব্যবহার করতে পারি যা আপনাকে অল্প সময়ের মধ্যে পাঠ্যগুলিকে সারিবদ্ধ করতে সহায়তা করবে।
এই নিবন্ধটি প্রদর্শন করবে কিভাবে CSS-এ টেক্সট উল্লম্বভাবে সারিবদ্ধ করা যায়।
কিভাবে CSS এ টেক্সট উল্লম্বভাবে সারিবদ্ধ করবেন?
CSS-এ, আপনি উল্লম্বভাবে পাঠ্য সারিবদ্ধ করতে নীচের বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন:
-
- লাইন-উচ্চতা সম্পত্তি
- প্রদর্শন এবং সারিবদ্ধ-আইটেম বৈশিষ্ট্য
এখন, একে একে প্রতিটি পদ্ধতির মধ্য দিয়ে যাওয়া যাক!
পদ্ধতি 1: CSS-এ টেক্সট উল্লম্বভাবে সারিবদ্ধ করতে লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করা
দ্য ' লাইনের উচ্চতা ” সম্পত্তি নীচের এলাকা এবং ঊর্ধ্বগামী ইনলাইন উপাদান নির্দিষ্ট করে। এটি অন্যান্য আইটেম থেকে একটি পাঠ্যের দূরত্ব সেট করে। লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করে, পাঠ্য সহজে মাঝখানে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে।
উদাহরণ
এখানে একটি বাক্সের ভিতরে একটি পাঠ্য রয়েছে (বর্ডার) বর্তমানে উপরের বাম দিকে অবস্থিত। আসুন এই পাঠ্যটিকে কেন্দ্রে উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করি:
এখন চলুন পরবর্তী পদ্ধতির দিকে এগিয়ে যাই। ' ফ্লেক্সবক্স ” হল একটি এক-মাত্রিক বিন্যাস যা আপনাকে HTML ফর্ম্যাট করতে দেয়। আপনি আইটেমগুলিকে উল্লম্বভাবে বা অনুভূমিকভাবে সারিবদ্ধ করতে এটি ব্যবহার করতে পারেন। সুতরাং, আসুন একটি উদাহরণ গ্রহণ করি এবং ফ্লেক্সবক্সের সাহায্যে একটি পাঠ্যকে উল্লম্বভাবে সারিবদ্ধ করি। উদাহরণ প্রথমত, আমরা “এর মান নির্ধারণ করে আমাদের কন্টেইনারকে নমনীয় করে তুলব। প্রদর্শন ' সম্পত্তি হিসাবে ' ফ্লেক্স ” পরবর্তী, ব্যবহার করুন ' সারিবদ্ধ আইটেম কেন্দ্রে উল্লম্বভাবে বিষয়বস্তু সেট করার জন্য সম্পত্তি। অধিকন্তু, কেন্দ্রে বিষয়বস্তুকে অনুভূমিকভাবে সারিবদ্ধ করতে, “ ন্যায্যতা-সামগ্রী 'সম্পত্তি ব্যবহার করা হবে: CSS-এ, টেক্সট সহজে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে ' লাইনের উচ্চতা 'সম্পত্তি। এছাড়াও আপনি ব্যবহার করতে পারেন ' flexbox ' এর সাথে পাঠ্যের উল্লম্ব প্রান্তিককরণের জন্য ' প্রদর্শন ' এবং ' সারিবদ্ধ আইটেম ' বৈশিষ্ট্য। ফ্লেক্সবক্স হল একটি এক-মাত্রিক বিন্যাস এবং সহজভাবে আইটেমগুলির উল্লম্ব বা অনুভূমিক প্রান্তিককরণের জন্য ব্যবহৃত হয়। এই পোস্টটি দুটি সহজ পদ্ধতির প্রস্তাব দিয়েছে যা আপনাকে CSS-এ উল্লম্বভাবে পাঠ্য সারিবদ্ধ করতে সাহায্য করতে পারে।
এটি করতে, একটি ধারক যোগ করুন '
সেরা শিক্ষামূলক ওয়েবসাইট !
div >
বাক্সটি একটি ' ব্যবহার করে গঠিত হয় 3px 'সীমান্ত এবং' 250px 'উচ্চতা। দ্য ' অক্ষরের আকার 'মূল্যের সাথে সম্পত্তি ব্যবহার করা হয়' 24px 'ফন্টটি দৃশ্যমান করতে। আমরা একটি div বরাদ্দ করব ' লাইনের উচ্চতা 'এর' 250px ” এর পাঠ্যটিকে মাঝখানে উল্লম্বভাবে সারিবদ্ধ করার জন্য। পরবর্তী, আমরা ব্যবহার করব ' পাঠ্য-সারিবদ্ধ কেন্দ্রে পাঠ্য সারিবদ্ধ করতে সম্পত্তি:
লাইন-উচ্চতা: 250px;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
ফন্ট-আকার: 24px;
উচ্চতা: 250px;
সীমানা: 3px কঠিন;
}
আপনি দেখতে পাচ্ছেন, পাঠ্যটিকে লাইন-উচ্চতা ব্যবহার করে কেন্দ্রে উল্লম্বভাবে সারিবদ্ধ করা হয়েছে এবং পাঠ্য-সারিবদ্ধ বৈশিষ্ট্যের সাথে কেন্দ্রে অনুভূমিকভাবে সারিবদ্ধ করা হয়েছে। পদ্ধতি 2: CSS-এ টেক্সট উল্লম্বভাবে সারিবদ্ধ করতে প্রদর্শন এবং সারিবদ্ধ-আইটেম বৈশিষ্ট্য ব্যবহার করা
প্রদর্শন: ফ্লেক্স ;
align-items: কেন্দ্র;
justify-content: কেন্দ্র;
ফন্ট-আকার: 24px;
উচ্চতা: 200px;
সীমানা: 3px কঠিন;
}
নির্দিষ্ট লেখাটি সফলভাবে কেন্দ্রে সারিবদ্ধ করা হয়েছে:
আমরা CSS-এ টেক্সটকে উল্লম্বভাবে সারিবদ্ধ করার পদ্ধতি প্রদান করেছি। উপসংহার