हम CSS text-align प्रॉपर्टी का उपयोग क्षैतिज अलाइनमेंट के लिए और CSS padding-top के साथ padding-bottom, या CSS line-height का उपयोग लंबवत अलाइनमेंट के लिए करके 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>
आउटपुट
आइए टेक्स्ट को लंबवत रूप से अलाइन करने का एक उदाहरण देखते हैं:
दूसरा उदाहरण
<!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>
आउटपुट
