CSS Alignment

Horizontally and vertically aligning elements is a common requirement.

CSS offers different alignment options for text, flex items, grids, containers, and more.

Example

#

The text below is horizontally centered with text-align.

Centered text
<div style="background-color: aliceblue;
            padding: 30px;
            text-align: center;">
  Centered text
</div>

Aligning HTML elements

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:

Align with text-align

The text-align property horizontally aligns text inside an element.

It accepts these values: left, right, justify, and center.

Here is an example.

Left text
Centered text
Right text
<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.


Align with margin

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.

Left
Centered
Right
<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>  

Align with padding

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.

Top
Middle
Bottom
<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.


Align with line-height

Setting line-height equal to the container height centers text vertically.

For horizontal alignment, text-align: center can be used.

Perfectly centered text.

Aligned with line-height
<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.


Align with position

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 container
  • bottom - aligns the element with the bottom side of the container
  • left - aligns the element with the left side of the container
  • right - aligns the element with the right side of the container

An element aligned to the bottom right.

Position: 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.


Align with position and transform

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.

This element is vertically and horizontally 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.


Align with float

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.

Float: right.
<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.


You may also like

Guides