CSS का उपयोग करके किसी एलिमेंट या उसके अंदर के कंटेंट को अलाइन किया जा सकता है, जो किसी एलिमेंट और उसके कंटेंट को हॉरिजॉन्टली, वर्टिकली या सेंटर में अलाइन करने के लिए विभिन्न विकल्प प्रदान करता है।
हॉरिजॉन्टल अलाइनमेंट
- इनलाइन एलिमेंट्स
टेक्स्ट, एंकर, स्पैन आदि जैसे इनलाइन या इनलाइन-ब्लॉक एलिमेंट्स को CSS text-align प्रॉपर्टी की मदद से हॉरिजॉन्टली अलाइन किया जा सकता है।
- ब्लॉक-लेवल एलिमेंट्स
div, p आदि जैसे ब्लॉक-लेवल एलिमेंट्स को CSS margin प्रॉपर्टी की मदद से हॉरिजॉन्टली अलाइन किया जा सकता है, लेकिन एलिमेंट की चौड़ाई पैरेंट के सापेक्ष 100% नहीं होनी चाहिए, क्योंकि तब इसे अलाइनमेंट की आवश्यकता नहीं होगी।
- फ्लोट या पोजिशन स्कीम का उपयोग करने वाले ब्लॉक-लेवल एलिमेंट्स
एलिमेंट्स को CSS float प्रॉपर्टी की मदद से हॉरिजॉन्टली अलाइन किया जा सकता है जो कई एलिमेंट्स को बाएं/दाएं अलाइन करता है न कि सेंटर में, या 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 padding, CSS line-height, या CSS vertical-align प्रॉपर्टी की मदद से वर्टिकली अलाइन किया जा सकता है।
- ब्लॉक-लेवल एलिमेंट्स
div, p आदि जैसे ब्लॉक-लेवल एलिमेंट्स को CSS margin प्रॉपर्टी, CSS flex प्रॉपर्टी के साथ CSS align-items, या पोजिशनिंग स्कीम मेथड एब्सोल्यूट के साथ CSS transform प्रॉपर्टी की मदद से वर्टिकली अलाइन किया जा सकता है।
उदाहरण
आइए 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>आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब div एडजस्ट नहीं किया गया है
जब div एडजस्ट किया गया है
सेंट्रल अलाइनमेंट
हम हॉरिजॉन्टल और वर्टिकल अलाइनमेंट में ऊपर बताए गए मेथड्स से एलिमेंट्स को सेंट्रली अलाइन कर सकते हैं।
