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