Introduction of CSS Alignment in Hindi
HTML मे normally ज़्यादातर elements की alignment left होती है। लेकिन हम CSS की मदद से alignment को जरूरत के हिसाब से बदल सकते है। इस alignment को बदलने के लिए position, background-position, float, margin, padding, text-align और कई सारी अन्य property का इस्तेमाल किया जाता है। इस tutorial मे हम देखेंगे की किस प्रकार से horizontal या vertical alignment दी जाती है।
Center Align Elements
margin: auto; property की मदद से Element को horizontally center मे align किया जाता है।
उदाहरण
<html>
<head>
<style>
.center {
margin: auto;
width: 50%%;
border: 3px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h3>Center Align Elements - CSS Alignment in Hindi</h3>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>
यहा element अपनी specified width लेता है और बाकी बची हुई space दोनों side equally split हो जाती है।
जब width 100% set होती है तब Center align property work नहीं करती है।
Center Align Text
Element की अंदर text को center मे align करने के लिये text-align: center; property का use होता है।
उदाहरण
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>Center Text - CSS Alignment in Hindi</h3>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Center an Image
Image को center मे align करने के लिए margin property का use कर सकते है।
उदाहरण
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h3>Center an Image - CSS Alignment in Hindi</h3>
<img src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="Image">
</body>
</html>
Left and Right Align – Using position
Position: absolute; की मदद से element की left या right alignment कर सकते है।
उदाहरण
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 250px;
border: 3px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h3>Right Align - CSS Alignment in Hindi</h3>
<div class="right">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</body>
</html>
Left and Right Align – Using float
float की मदद से भी हम element को left या right align कर सकते है।
उदाहरण
<html>
<head>
<style>
.right {
float: right;
width: 250px;
border: 3px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h3>Right Align - CSS Alignment in Hindi</h3>
<div class="right">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</body>
</html>
The clearfix Hack
जब कोई element (image) अपने container से बाहर हो जाती है मतलब की overflow होती है तब clearfix hack का use किया जाता है।
उदाहरण
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h3>Without Clearfix - CSS Alignment in Hindi</h3>
<div>
<img class="img1" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h3 style="clear:right">With New Modern Clearfix</h3>
<div class="clearfix">
<img class="img2" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Center vertically – Using padding
Element को vertically align करने के CSS मे बहोत सारे तरीके है। यहा उदाहरण मे हम padding की मदद से Vertically align करेंगे।
उदाहरण
<html>
<head>
<style>
.center {
padding: 50px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h3>Center Vertically - css align in hindi</h3>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
text-align: center और padding की मदद से हम element को horizontally और vertically align कर सकते है।
उदाहरण
<html>
<head>
<style>
.center {
padding: 50px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h3>Centering - css align in hindi</h3>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Center Vertically – Using position & transform
यहा उदाहरण मे हम position & transform property की मदद से Vertically align करेंगे।
उदाहरण
<html>
<head>
<style>
.center {
height: 150px;
position: relative;
border: 3px solid black;
}
.center p {
margin: 0;
position: absolute;
top: 50%%;
left: 50%%;
-ms-transform: translate(-50%%, -50%%);
transform: translate(-50%%, -50%%);
}
</style>
</head>
<body>
<h3>Centering - css align in hindi</h3>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Center Vertically – Using Flexbox
यहा उदाहरण मे हम flexbox की मदद से Vertically align करेंगे। हम flexbox के बारे मे Flexbox chapter मे detail मे जानेंगे।
उदाहरण
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 180px;
border: 3px solid black;
}
</style>
</head>
<body>
<h3>Flexbox Centering</h3>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>