Align in CSS

In CSS, the align property is commonly used to align elements within a container.

However, it’s important to note that the align property is not a standard CSS property by itself; rather, alignment is typically controlled by a combination of properties depending on the context.


Text Alignment (text-align)

The text-align property is used to align text inside its containing element.

Syntax: text-align: left | right | center | justify | start | end;

<div style="text-align: left;">
  <p>This text is aligned to the left.</p>
</div>

<div style="text-align: center;">
  <p>This text is centered.</p>
</div>

<div style="text-align: right;">
  <p>This text is aligned to the right.</p>
</div>

<div style="text-align: justify;">
  <p>This text is justified, meaning it will stretch to fit the width of the container.</p>
</div>


Horizontal Alignment for Flexbox (justify-content)

The justify-content property aligns items along the main axis of a flex container.

Syntax: justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

<div style="display: flex; justify-content: center;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>


Vertical Alignment for Flexbox (align-items)

The align-items property aligns items along the cross axis of a flex container.

Syntax: align-items: flex-start | flex-end | center | baseline | stretch;

<div style="display: flex; align-items: center; height: 50px; border: 1px solid #000;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div style="display: flex; align-items: flex-end; height: 50px; border: 1px solid #000;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>


Alignment for Grid Items (align-items and justify-items)

For CSS Grid Layout, align-items aligns items vertically, while justify-items aligns them horizontally.

Syntax:

  • align-items: start | end | center | stretch;
  • justify-items: start | end | center | stretch;
<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 50px; border: 1px solid #000;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: start; height: 50px; border: 1px solid #000;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>


Vertical Alignment for Inline Elements (vertical-align)

The vertical-align property is used for aligning inline or inline-block elements vertically within their containing block.

Syntax: vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom;

<div style="line-height: 50px; height: 50px; border: 1px solid #000;">
  <span style="vertical-align: top;">Top aligned</span>
  <span style="vertical-align: middle;">Middle aligned</span>
  <span style="vertical-align: bottom;">Bottom aligned</span>
</div>


Each of these properties helps control different aspects of alignment in CSS. Understanding when to use each one can help you create well-aligned, responsive layouts.