আমরা CSS ব্যবহার করে একটি উপাদান বা এর ভিতরের বিষয়বস্তুকে সারিবদ্ধ করতে পারি যা একটি উপাদান এবং এর বিষয়বস্তুকে অনুভূমিকভাবে, উল্লম্বভাবে বা কেন্দ্রে সারিবদ্ধ করার জন্য বিভিন্ন বিকল্প প্রদান করে।
অনুভূমিক প্রান্তিককরণ
- ইনলাইন-উপাদান
ইনলাইন উপাদান বা ইনলাইন-ব্লক উপাদান যেমন টেক্সট, অ্যাঙ্কর, স্প্যান ইত্যাদি অনুভূমিকভাবে সিএসএস টেক্সট-সারিবদ্ধ বৈশিষ্ট্যের সাহায্যে সারিবদ্ধ করা যেতে পারে।
- ব্লক-স্তরের উপাদান
ব্লক-লেভেল এলিমেন্ট যেমন div, p, ইত্যাদিকে CSS মার্জিন প্রপার্টির সাহায্যে অনুভূমিকভাবে সারিবদ্ধ করা যেতে পারে, কিন্তু উপাদানের প্রস্থ 100% প্যারেন্টের সাথে আপেক্ষিক হওয়া উচিত নয় কারণ এটির সারিবদ্ধকরণের প্রয়োজন হবে না।
- ফ্লোট বা অবস্থান স্কিম ব্যবহার করে ব্লক-স্তরের উপাদান
উপাদানগুলিকে CSS ফ্লোট প্রপার্টির সাহায্যে অনুভূমিকভাবে সারিবদ্ধ করা যেতে পারে যা একাধিক উপাদানকে বাম/ডানে সারিবদ্ধ করে এবং কেন্দ্রে নয় বা CSS পজিশনিং স্কিম পরম পদ্ধতি ব্যবহার করে।
উদাহরণ
আসুন CSS অনুভূমিক প্রান্তিককরণের একটি উদাহরণ দেখি -
<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.seats span, .backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.seats span{
width: 120px;
display: inline-block;
background-color: #48C9B0;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
.center{
text-align: center;
}
.seats{
text-align: center;
}
.backSeats div {
background-color: #dc3545;
}
.leftFloat{
float: left;
}
.rightAbsolute{
position: absolute;
right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
উল্লম্ব প্রান্তিককরণ
- ইনলাইন-উপাদান
ইনলাইন উপাদান বা ইনলাইন-ব্লক উপাদান যেমন টেক্সট, অ্যাঙ্কর ইত্যাদিকে CSS প্যাডিং, CSS লাইন-উচ্চতা বা CSS উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্যের সাহায্যে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে।
- ব্লক-স্তরের উপাদান
ব্লক-লেভেল এলিমেন্ট যেমন div, p, ইত্যাদিকে CSS মার্জিন প্রপার্টি, CSS ফ্লেক্স প্রোপার্টি এবং CSS অ্যালাইন-আইটেমগুলির সাহায্যে অথবা CSS ট্রান্সফর্ম প্রোপার্টি সহ সম্পূর্ণ পজিশনিং স্কিম পদ্ধতির সাহায্যে উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে।
উদাহরণ
আসুন CSS উল্লম্ব প্রান্তিককরণ -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.seats span:not(.withPadding){
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.seats span:not(.vertical){
height: 40px;
display: inline-block;
background-color: #48C9B0;
}
.withPadding{
padding: 20px 20px 0px;
height: 20px;
color: white;
border: 4px solid #000;
}
.vertical{
display: inline-table;
background-color: #48C9B0;
height: 40px;
}
.verticalText {
display: table-cell;
vertical-align: middle;
}
.withLineHeight{
line-height: 40px;
}
.seats{
text-align: center;
}
.backLeftSeat{
background-color: #dc3545;
max-height: 100px;
height: 70px;
margin: 20px;
width: 300px;
display: inline-block;
position: relative;
resize: vertical;
overflow: auto;
border: 4px solid #000;
}
.withPosition{
position: absolute;
top: 50%;
left: 2px;
right: 2px;
color: white;
padding: 20px;
transform: translateY(-50%);
}
.backRightSeats{
height: 122px;
width: 800px;
float: right;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.withFlex {
background-color: #dc3545;
border: 4px solid #000;
margin-right: 10px;
color: white;
padding: 20px;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন ডিভ সামঞ্জস্য করা হয় না
যখন ডিভ সামঞ্জস্য করা হয়
কেন্দ্রীয় প্রান্তিককরণ
আমরা অনুভূমিক এবং উল্লম্ব প্রান্তিককরণে উপরে উল্লিখিত পদ্ধতিগুলির সাথে কেন্দ্রীয়ভাবে উপাদানগুলিকে সারিবদ্ধ করতে পারি৷
