Horizontally and vertically aligning elements is a common requirement.
CSS offers different alignment options for text, flex items, grids, containers, and more.
The text below is horizontally centered with text-align.
<div style="background-color: aliceblue;
padding: 30px;
text-align: center;">
Centered text
</div>
There are many ways of aligning HTML elements.
First of all, different layout systems have their own alignment methods:
However, we'll focus on these commonly used properties:
The text-align property horizontally aligns text inside an element.
It accepts these values: left, right, justify, and center.
Here is an example.
<style>
.elt {
border: 3px solid #6266f1;
padding: 20px;
margin: 20px 0;
}
</style>
<div class="elt" style="text-align:left;">Left text</div>
<div class="elt" style="text-align:center;">Centered text</div>
<div class="elt" style="text-align:right;">Right text</div>
For details on text-alignment, see our CSS text-align Property Reference.
Elements can also be aligned with margin.
margin: auto aligns the element at the center of its container.
margin-left: auto aligns the element at the right side of its container.
margin-right: auto aligns the element at the left side of its container.
margin does not affect elements 1) without width, or 2) with 100% width.
Three fixed-width <div> elements aligned with margin.
<style>
.container-element {
background-color: aliceblue;
padding: 25px 0;
margin: 10px 0;
}
.item-element {
width: 150px;
border: 3px solid #6266f1;
text-align: center;
}
</style>
<div class="container-element">
<div class="item-element"
style="margin-right:auto;">
Left
</div>
</div>
<div class="container-element">
<div class="item-element"
style="margin:auto;">
Centered
</div>
</div>
<div class="container-element">
<div class="item-element"
style="margin-left:auto;">
Right
</div>
</div>
Images can also be aligned with margin:auto.
<div>
<img src="/img/css/the-sower-sm.jpg"
style="margin-left: auto; display: block;">
</div>
Elements can be aligned with the padding property.
The difference with margin is that positions are absolute (px or other units).
Three element vertically aligned using padding.
<style>
.container-elt {
background-color: aliceblue;
height: 96px;
margin: 10px 0;
}
.item-elt {
width: 150px;
border: 3px solid #6266f1;
text-align: center;
}
</style>
<div class="container-elt"
style="padding-top:0;">
<div class="item-elt">
Top
</div>
</div>
<div class="container-elt"
style="padding-top:30px">
<div class="item-elt">
Middle
</div>
</div>
<div class="container-elt"
style="padding-top:60px;">
<div class="item-elt">
Bottom
</div>
</div>
For details on padding, see our CSS padding Property Reference.
Setting line-height equal to the container height centers text vertically.
For horizontal alignment, text-align: center can be used.
Perfectly centered text.
<style>
.align-height {
line-height: 200px;
height: 200px;
border: 3px solid #6266f1;
text-align: center;
}
</style>
<div class="align-height">
Aligned with line-height
</div>
For details on line-height, see our CSS line-height Property Reference.
With position: absolute the exact location can be specified.
The coordinates are set with these properties:
top - aligns the element with the top side of the containerbottom - aligns the element with the bottom side of the containerleft - aligns the element with the left side of the containerright - aligns the element with the right side of the containerAn element aligned to the bottom right.
<style>
.pos-container {
position: relative;
background-color: aliceblue;
height: 150px;
}
.pos-item {
position: absolute;
bottom: 0;
right: 0;
max-width: 300px;
border: 3px solid #6266f1;
padding: 10px;
}
</style>
<div class="pos-container">
<div class="pos-item">
Position: bottom right
</div>
</div>
For details on position, see our CSS position Property Reference.
The position and transform properties can together align elements.
The element is positioned and then translated by the same position value but negatively.
This element is centered with position and transform.
<style>
.align-transform {
height: 300px;
position: relative;
border: 3px solid #6266f1;
}
.align-transform > div {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: aliceblue;
}
</style>
<div class="align-transform">
<div>
This element is vertically and horizontally
centered with position and transform.
</div>
</div>
For details on transform, see our CSS transform Property Reference.
The float property aligns an element to the left or right side of its container.
Assigning float: none removes the float setting.
This element is right aligned using float.
<style>
.float-container {
height: 150px;
border: 3px solid #6266f1;
}
.float-right {
float: right;
background-color: aliceblue;
padding: 20px;
}
</style>
<div class="float-container">
<div class="float-right">
Float: right.
</div>
</div>
For details on float, see our CSS float Property Reference.
