Alignment in CSS

CSS Align

In CSS, we can align the HTML elements in different ways.

1) margin: auto;

To align a block level element horizontally in the center, give the value of the margin for that element auto.

For example

<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

Use the text-align property to align the text inside an element.

for example

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: - Use vertical-align property to vertically align a content.

<style>

div p {

border: 1px solid red;

vertical-align: middle;

}

</ style>

<div>

<p> This is a test </ p>

</ div>

Center vertically through the padding

By defining the top and bottom padding of an element, we can also vertically align its contents in the center.

For example

<style>

div {

padding: 40px 0px;

border: 1px solid blue;

}

</ style>

<div>

<p> This is some text. </ p>

</ div>