আমরা HTML ডকুমেন্টে টেক্সট অ্যালাইন করতে CSS text-align প্রপার্টি (অনুভূমিক অ্যালাইনমেন্ট) এবং CSS padding-top সাথে padding-bottom, বা CSS line-height (উল্লম্ব অ্যালাইনমেন্ট) ব্যবহার করতে পারি।
সিনট্যাক্স
উপরোক্ত CSS প্রপার্টিগুলোর সিনট্যাক্স নিম্নরূপ:
Selector { text-align: center | left | right | justify | inherit | initial; } Selector { padding: /*মান*/; } Selector { line-height: /*মান*/; }
টেক্সট অনুভূমিকভাবে অ্যালাইন করার একটি উদাহরণ দেখি:
উদাহরণ
<!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>
আউটপুট
টেক্সট উল্লম্বভাবে অ্যালাইন করার একটি উদাহরণ দেখি:
উদাহরণ
<!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>
আউটপুট
