CSS ব্যবহার করে টেক্সট অ্যালাইনমেন্ট সেট করা

আমরা অনুভূমিক প্রান্তিককরণের জন্য CSS টেক্সট-সারিবদ্ধ বৈশিষ্ট্য এবং CSS প্যাডিং-টপ-এর সাথে CSS প্যাডিং-টপ, অথবা উল্লম্ব প্রান্তিককরণের জন্য CSS লাইন-উচ্চতা ব্যবহার করে HTML নথিতে পাঠ্যকে সারিবদ্ধ করতে পারি।

সিনট্যাক্স

উপরে উল্লিখিত CSS বৈশিষ্ট্যগুলির জন্য সিনট্যাক্স নিচে দেওয়া হল -

Selector {
   text-align: center | left | right | justify | inherit | initial;
}
Selector {
   padding: /*value*/;
}
Selector {
   line-height: /*value*/;
}

আসুন পাঠ্যকে অনুভূমিকভাবে সারিবদ্ধ করার একটি উদাহরণ দেখি -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>CSS Text 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{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
   width: 120px;
   display: inline-block;
   background-color: #48C9B0;
}
.left{
   text-align: left;
}
.right{
   text-align: right;
}
.center{
   text-align: center;
}
.seats{
   text-align: center;
}
</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>
</body>
</html>

আউটপুট

CSS ব্যবহার করে টেক্সট অ্যালাইনমেন্ট সেট করা

আসুন টেক্সটকে উল্লম্বভাবে সারিবদ্ধ করার একটি উদাহরণ দেখি -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>CSS Text 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;
}
</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>
</body>
</html>

আউটপুট

CSS ব্যবহার করে টেক্সট অ্যালাইনমেন্ট সেট করা