text-align প্রোপার্টি দিয়ে ব্লক-লেভেল এলিমেন্টের ভেতরের ইনলাইন কন্টেন্ট (টেক্সট, ইমেজ, ইনলাইন-ব্লক) হরিজেন্টালি অ্যালাইন করা হয়।
সম্ভাব্য মান:
left— বামে অ্যালাইন (LTR-এ ডিফল্ট)right— ডানে অ্যালাইনcenter— মাঝপথে অ্যালাইনjustify— উভয় পাশে জাস্টিফাই (নিউজপেপার স্টাইল)initial/inherit
উদাহরণ ১: মাল্টি-কলাম লেআউটে জাস্টিফাই
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: auto auto;
-moz-columns: auto auto;
columns: auto auto;
text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing.
The developers now take advantage of this in creating new Machine Learning models...
</div>
</body>
</html>
উদাহরণ ২: গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডের ওপর সেন্টার্ড টেক্সট
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet); }
.demo { text-decoration: overline; text-decoration-color: yellow; font-variant: normal; text-align: center; }
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
নোট: text-align ব্লক এলিমেন্টের ওপর প্রয়োগ করতে হয়, ইনলাইন এলিমেন্টের ওপর নয়।
