CSS Center Align Elements
CSS center align is used to create align by using block element. You should specify
margin: auto;properties.
The element will take up the specified width and the remaining space. It will split equally between the two margins:
Let us see an example of CSS align:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<div class="center">
<p><b>Note: </b> margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Try Now
Center Align Text
Center aligns text CSS property is used to create text in center. You should use
text-align: center;element.
Example
.center {
text-align: center;
border: 1px solid green;
}
Center Align Image
Center aligns image CSS property is used to create text center. You should use
margin:auto; element.
Example
img {
display: block;
margin: 0 auto;
}
Left and Right Align by using position
There is one method for aligning elements. You can use
position: absolute;
Let us see an example of CSS left and right align by using position:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right Align</h2>
<div class="right">
<p>Hello friends we are learning. Hello friends we are learning.</p>
</div>
</body>
</html>
Try Now
Center vertically using padding
There are various way to center an element vertically in CSS. A simple solution is to use top and bottom padding.
Example
.center {
padding: 70px 0;
border: 3px solid green;
}
