डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Alignment

Normally, HTML में by default ज्यादातर Elements की alignment ये left होती है | CSS की मदद से इन alignment को बदला जरुरत होने पर बदला जाता है | इन alignment को बदलने के लिए text-align, margin, padding, float, background-position, position और आदि कई properties का इस्तेमाल किया जाता है | हम यहाँ पर देखेंगे कि CSS में Content के लिए किस प्रकार से horizontal और vertical alignment दी जाती है |

text Alignment using text-align Property

<p style="border:1px solid;padding:10px;text-align:left;">
text-align:left;
</p>
<p style="border:1px solid;padding:10px;text-align:center;">
text-align:center;
</p>
<p style="border:1px solid;padding:10px;text-align:right;">
text-align:right;
</p>
Output :

text-align:left;

text-align:center;

text-align:right;


center Alignment for Container using margin and width Property

<div style="margin:0 auto;width:40%;border:1px solid;">
Center Aligning Container
</div>
Output :
Center Aligning Container

Left and Right Aligning Using float Property

<style>
.lFloat{
border : 1px solid;
padding : 10px;
float : left;
}
.rFloat{
border : 1px solid;
padding : 10px;
float : right;
}
</style>

<div class="lFloat">float:left</div>
<div class="lFloat">float:left</div>
<div class="rFloat">float:right</div>
<div class="rFloat">float:right</div>
Output :
float:left
float:left
float:right
float:right

Left, Right, Top and Bottom Aligning Using position Property

<style>
.main{
 border:1px solid;
 position:relative;
 margin:0 auto;
 width:80%;
 height:300px;
}
.top{
 position:relative;
 top:0;
 border:1px solid;
 background-color:red;
}
.bottom{
 position:absolute;
 bottom:0;
 border:1px solid;
 background-color:green;
}
.left{
 position:absolute;
 left:0;
 border:1px solid;
 background-color:blue;
}
.right{
 position:absolute;
 right:0;
 border:1px solid;
 background-color:yellow;
}
</style>
<div class="main">
<div class="top">top:0;</div>
<div class="bottom">bottom:0;</div>
<div class="left">left:0;</div>
<div class="right">right:0;</div>
</div>
Output :
top:0;
bottom:0;
left:0;
right:0;

Use background-position Property for Image Background

<style>
body{
 background-image: url('nature.jpg');
 background-repeat: no-repeat;
 background-position : center center; 
}
</style>

<body></body>
Output :

use padding property for vertically and horizonatally center Alignment

<style>
div{
 padding : 100px; /* Use padding:100px 0; for only vertical centerting */
 border : 1px solid;
 text-align:center;
}
</style>

<div>
Center Alignment using padding property
</div>
Output :
Center Alignment using padding property

use margin property for vertically and horizontally center Alignment

<style>
.main{
 border : 1px solid;
}
.mydiv{
 margin : 100px; /* Use margin:100px 0; for only vertical centerting */
 text-align:center;
}
</style>

<div class="main">
<div class="mydiv">
Center Alignment using margin property
</div>
</div>
Output :
Center Alignment using margin property