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>
