লিঙ্কটি কেন্দ্রীভূত করার দুটি পদ্ধতি রয়েছে:
- CSS এ কেন্দ্রের লিঙ্কগুলি ' ব্যবহার করে পাঠ্য-সারিবদ্ধ 'সম্পত্তি
- CSS এ কেন্দ্রের লিঙ্কগুলি ' ব্যবহার করে মার্জিন 'সম্পত্তি
এই নিবন্ধে, আমরা লিঙ্কটিকে কেন্দ্রীভূত করার উভয় পদ্ধতি ব্যাখ্যা করব। সুতরাং শুরু করি!
পদ্ধতি 1: টেক্সট-এলাইন প্রপার্টি ব্যবহার করে CSS-এ কেন্দ্রের লিঙ্ক
HTML এ লিঙ্কগুলিকে কেন্দ্রীভূত করতে, আমরা ব্যবহার করব “ পাঠ্য-সারিবদ্ধ CSS এর সম্পত্তি। দ্য ' পাঠ্য-সারিবদ্ধ ” CSS-এর বৈশিষ্ট্য বাম, ডান, কেন্দ্রের মতো পাঠ্যের সারিবদ্ধকরণ সামঞ্জস্য করতে এবং সারিবদ্ধকরণকে ন্যায়সঙ্গত করতে ব্যবহার করা হয়।
বাক্য গঠন
টেক্সট-সারিবদ্ধ বৈশিষ্ট্যের সিনট্যাক্স হল:
পাঠ্য-সারিবদ্ধ : মান
পরিবর্তে ' মান ”, আপনি বাম, ডান, কেন্দ্র এবং ন্যায়সঙ্গত হিসাবে পাঠ্যের প্রান্তিককরণ সেট করতে পারেন।
এখন, আমরা ব্যবহার করব ' পাঠ্য-সারিবদ্ধ প্রদত্ত লিঙ্কগুলিকে কেন্দ্রে সারিবদ্ধ করতে।
উদাহরণ
একটি ওয়েব পৃষ্ঠায় একটি লিঙ্ক কেন্দ্রীভূত করতে, আমরা
ট্যাগের ভিতরে HTML এ একটি লিঙ্ক যুক্ত করব। এটি করার জন্য, একটি হাইপারলিঙ্ক নির্ধারণ করতে এবং প্রয়োজনীয় সাইটের ঠিকানা দিতে ট্যাগ ব্যবহার করুন। এর পরে, লিঙ্কটির নাম উল্লেখ করুন। আমাদের ক্ষেত্রে, আমরা আমাদের লিনাক্সহিন্ট ওয়েবসাইটে লিঙ্কটি যুক্ত করেছি।এইচটিএমএল
< শরীর >< ক href = 'https://linuxhint.com/' > লিনাক্স < / ক >
< / শরীর >
নীচের প্রদত্ত চিত্রটি নির্দেশ করে যে লিঙ্কটি যুক্ত করা হয়েছে যা ডিফল্টরূপে বাম দিকে অবস্থিত:
এখন লিঙ্কটিকে কেন্দ্র করে CSS এ যান।
এখানে, আমরা ব্যবহার করব ' ক যোগ করা লিঙ্ক অ্যাক্সেস করতে. এর পরে, টেক্সট-এলাইনের মান ' হিসাবে সেট করুন কেন্দ্র ' এবং ' হিসাবে প্রদর্শন করুন ব্লক ” ফলস্বরূপ, উপাদানটি একটি ব্লক উপাদান হিসাবে যোগ করা হবে, একটি নতুন লাইন থেকে শুরু হবে এবং পুরো প্রস্থটি গ্রহণ করবে।
সিএসএস
ক {পাঠ্য-সারিবদ্ধ : কেন্দ্র ;
প্রদর্শন : ব্লক ;
}
বিঃদ্রঃ: CSS টেক্সট-সারিবদ্ধ বৈশিষ্ট্য ট্যাগ কেন্দ্রে একা কাজ করে না। অতএব, আপনাকে অবশ্যই ব্যবহার করতে হবে ' প্রদর্শন 'সম্পত্তি এবং তার মান সেট করুন' ব্লক লিঙ্কটিকে কেন্দ্র করতে।
এখন, HTML এ যান এবং নিম্নলিখিত ফলাফল দেখতে এটি কার্যকর করুন। এখানে, আপনি দেখতে পাচ্ছেন যে লিঙ্কটি ওয়েবপৃষ্ঠার কেন্দ্রে সারিবদ্ধ হয়েছে:
কেন্দ্রে লিঙ্কটি সারিবদ্ধ করার জন্য দ্বিতীয় পদ্ধতিতে চলুন।
পদ্ধতি 2: 'মার্জিন' প্রপার্টি ব্যবহার করে CSS-এ কেন্দ্রের লিঙ্ক
সিএসএস-এ, ' মার্জিন ' সম্পত্তি লিঙ্ক কেন্দ্রে ব্যবহার করা হয়. এটি 'এর শর্টহ্যান্ড সম্পত্তি মার্জিন-বাম ', ' মার্জিন-ডান ', ' মার্জিন-শীর্ষ ', এবং ' মার্জিন-নিচ ' বৈশিষ্ট্য। আপনি একটি লাইনে প্রদত্ত সমস্ত বৈশিষ্ট্যের মান সেট করতে পারেন।
বাক্য গঠন
মার্জিন সম্পত্তির সিনট্যাক্স হল:
মার্জিন : স্বয়ংক্রিয় | শীর্ষ অধিকার নীচে বামউপরে-প্রদত্ত সিনট্যাক্সের বিবরণ নীচে দেওয়া হল:
- স্বয়ংক্রিয়: এটি ব্রাউজার অনুযায়ী উপাদান সেট করতে ব্যবহৃত হয়।
- শীর্ষ: এটি উপরে থেকে মার্জিন সেট করতে ব্যবহৃত হয়।
- ডান এটি ডান দিক থেকে মার্জিন সেট করতে ব্যবহৃত হয়।
- বোতাম: এটি নিচ থেকে মার্জিন সেট করতে ব্যবহৃত হয়।
- বাম: এটি বাম দিক থেকে মার্জিন সেট করতে ব্যবহৃত হয়।
বিঃদ্রঃ: দুটি মান নির্দিষ্ট করলে উপরে এবং নীচের মার্জিন এবং বাম এবং ডান দিক থেকে মার্জিন বোঝাবে; যাইহোক, যদি একটি মান যোগ করা হয়, মার্জিন চার দিকে প্রয়োগ করা হবে।
আসুন উদাহরণে চলে যাই, যেখানে আমরা ' ব্যবহার করে একটি লিঙ্ক কেন্দ্র করব মার্জিন 'সম্পত্তি।
উদাহরণ
প্রথমে ডিসপ্লে প্রপার্টির মান সেট করুন “ ব্লক ' এবং প্রস্থ হিসাবে ' 70px ” এর পরে, মার্জিন সম্পত্তি প্রয়োগ করুন এবং এর মান সেট করুন “ স্বয়ংক্রিয় ”:
ক {প্রদর্শন : ব্লক ;
প্রস্থ : 70px ;
মার্জিন : স্বয়ংক্রিয় ;
}
বিঃদ্রঃ: দ্য ' প্রদর্শন ' এবং ' প্রস্থ ' সম্পত্তি সেট করা আবশ্যক; অন্যথায়, ' মার্জিন সম্পত্তি কাজ করবে না। প্রস্থ সম্পত্তির মান ডিসপ্লে স্ক্রিনের রেজোলিউশন এবং পাঠ্যের দৈর্ঘ্য অনুযায়ী সেট করা যেতে পারে।
আপনি প্রদত্ত চিত্র থেকে দেখতে পাচ্ছেন যে লিঙ্কটি সফলভাবে কেন্দ্রীভূত হয়েছে:
এটাই! আমরা লিঙ্কটিকে কেন্দ্রীভূত করার পদ্ধতিগুলি ব্যাখ্যা করেছি।
উপসংহার
দ্য ' পাঠ্য-সারিবদ্ধ ' এবং ' মার্জিন ' সম্পত্তির অবদানের সাথে লিঙ্কটিকে কেন্দ্রীভূত করতে ব্যবহৃত হয় ' প্রদর্শন ' এবং ' প্রস্থ 'সম্পত্তি। টেক্সট-অ্যালাইন প্রপার্টির সাথে ডিসপ্লে প্রপার্টি আবশ্যক, মার্জিন প্রপার্টি ব্যবহার করার সময়, লিংকটিকে কেন্দ্রে রাখতে ডিসপ্লে এবং প্রস্থ উভয় বৈশিষ্ট্যই বাধ্যতামূলক। এই নির্দেশিকা CSS-এ একটি লিঙ্ক কেন্দ্রীভূত করার জন্য বিভিন্ন পদ্ধতি নিয়ে আলোচনা করেছে।