Alignment in CSS

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>


error: Content is protected !!