In this CSS tutorial, we will be going through all the tricks you can use to align an element without using a dedicated align property and we will also be covering how horizontal and vertical alignment can be performed using various CSS properties.
Align a Text in Center
In CSS we have text-align property, which can set the alignment of the element text. It accepts values like, center, right and left.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.mid {
text-align: center;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="mid">
<p>This Paragrpah is in center.</p>
</div>
</body>
</html>
Preview
Align an Image in Center
Unfortunately, we do not have a dedicated property to align an image to the center, but using some other properties we can make this happen. To align an image in center we have to set
margin
-
right
and
margin-left
properties to
auto
and make the
display
element
block
.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="https://secureservercdn.net/160.153.137.163/84g.4be
.myftpupload.com/wp-content/uploads/2019/03/Techgeekbuzz.png"
alt="Techgeekbuzz Logo" style="width:40%">
</body>
</html>
Align an Element left or right using position Property
With position property and absolute value, we can either align an element left or right.
Example (right alignment)
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 50%;
border: 3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="right">
<p>This Paragraph is aligned right.</p>
</div>
</body>
</html>
Preview
<!DOCTYPE html>
<html>
<head>
<style>
.left {
position: absolute;
left: 0px;
width: 50%;
border: 3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="left">
<p>This Paragraph is aligned left.</p>
</div>
</body>
</html>
Preview
Align an Element left or right using float Property
float property accepts values like left and right which can be used for the element content alignment. But if the element which is aligned using float property does not fit in its parent element box then it can overflow outside. Example (right alignment)
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 50%px;
border: 3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="right">
<p>This Paragraph is aligned right.</p>
</div>
</body>
</html>
Preview
Example (left alignment)
<!DOCTYPE html>
<html>
<head>
<style>
.left {
float: left;
width: 50%px;
border: 3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="left">
<p>This Paragraph is aligned left.</p>
</div>
</body>
</html>
Preview
Use padding for Center Vertically
To center an element content vertically we can use the
padding
property with specified top and right values.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.ver_cen {
padding: 50% 0;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="ver_cen">
<p>This paragraph is vertically centered.</p>
</div>
</body>
</html>
Preview
Center a text using padding property
To align a text in the mid-center we can use the
text-align:center
with the
padding
property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.cen {
padding: 50% 0;
border: 3px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="cen">
<p> This paragraph is center aligned.</p>
</div>
</body>
</html>
Preview
Center Alignment using line-height property
The text content of an element can be aligned centre using the
line-height
property. The trick is, set the values for
line-height
and
hight
same.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.mid {
line-height: 300px;
height: 300px;
border: 3px solid red;
text-align: center;
}
.mid p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="mid">
<p>This paragraph is center aligned.</p>
</div>
</body>
</html>
Preview
This paragraph is center aligned.
Center Alignment using the transform property
If you are not satisfied with the
line-hight
and
padding
properties center alignment trick, then you can also use the
transform
property to align a text in mid center.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.mid {
height: 100px;
position: relative;
border: 3px solid red;
}
.mid p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="mid">
<p>This paragraph is center aligned.</p>
</div>
</body>
</html>
Preview
This paragraph is center aligned.
Summary
In this CSS Layout tutorial, you learned how can you use different CSS properties to align an HTML element within a web-page. You might also face such questions during your CSS interview , where the interview may ask you to code different techniques to align an element.