CSS Align
css में हम html elements को विभिन्न तरीकों से align कर सकते हैं।
1) margin: auto;
किसी block level element को horizontally center में align करने के लिए उस element के लिए margin की value auto देते हैं।
For e.g.
<style>
.box{
margin: auto;
padding: 20px;
border: 1px solid black;
width: 70%;
}
</style>
<div class = “box”><p>This is a test</p></div>
Alignment of Content
किसी element के अंदर के text को align करने के लिए text को align करने के लिए text-align property का use करते हैं।
for e.g.
1)
p{
border: 1px solid block;
text-align: left;
}
<p>This is a paragraph.</p>
2)
p{
border: 1px solid black;
text-align: center;
}
<p>This is a paragraph.</p>
3)
p{
border: 1px solid black;
text-align: right;
}
<p>This is a paragraph.</p>
* vertical-align property :- किसी content को vertically align करने के लिए vertical-align property का use करते हैं।
For e.g.
<style>
div p{
border: 1px solid red;
vertical-align: middle;
}
</style>
<div>
<p>This is a test</p>
</div>
Padding के द्वारा vertically center align करना
किसी element की top और bottom padding define करके भी हम उसके content को vertically center में align कर सकते हैं।
For e.g.
<style>
div{
padding: 40px 0px;
border: 1px solid blue;
}
</style>
<div>
<p>This is some text.</p>
</div>
