CSS Align

In web development, "alignment" isn't just a single property—it is a collection of tools used to position content exactly where it needs to be. Depending on whether you are working with a single sentence, a row of buttons, or a complex dashboard layout, you will use different CSS properties. This guide covers the four pillars of CSS alignment: Text, Vertical, Flexbox, and Grid.

Text Alignment

The text-align property is your primary tool for horizontal alignment of "inline" content. This includes text, images (which are inline by default), and spans. It is applied to the parent container (the block-level element) to control how its children are positioned horizontally.

Values

• left: The default for most languages. Text starts at the left edge.
• right: Often used for dates in blog posts or specific financial data in tables.
• center: Positions text in the exact horizontal middle of its container.
• justify: Adjusts the spacing between words so that every line has the exact same width. This is common in newspaper and magazine layouts.

Example

css

/* Horizontal alignment for content inside containers */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

html

<p class="text-left">This text is left-aligned.</p>
<p class="text-center">This text is center-aligned (great for headings).</p>
<p class="text-right">This text is right-aligned.</p>
<p class="text-justify">This text is justified. The browser adds tiny spaces between words so that the left and right edges of the paragraph are perfectly straight, similar to a printed book.</p>

Vertical Alignment

The vertical-align property is one of the most misunderstood properties in CSS because it only works in specific contexts: inline elements (like <span>, <img>, or <input>) and table cells.

Values

• baseline: The default. Aligns the bottom of the element with the baseline of the text.
• top: Aligns the top of the element with the tallest element on the current line.
• middle: Typically used to center an icon next to text.
• bottom: Aligns the bottom of the element with the lowest element on the line.
• text-top: Aligns with the top of the parent's font.
• text-bottom: Aligns with the bottom of the parent's font.

Example

css

/* Useful for aligning images or icons within a line of text */
.vertical-top {
  vertical-align: top;
}

.vertical-middle {
  vertical-align: middle;
}

.vertical-bottom {
  vertical-align: bottom;
}

html

<div>
  <img src="icon.png" class="vertical-middle" alt="icon">
  <span class="vertical-middle">This text and icon are vertically centered together.</span>
</div>

Alignment in Flexbox

Flexbox is the modern standard for 1D (one-dimensional) layouts. It gives you incredible control over how items are distributed across a row or column.

Main Axis Alignment

The justify-content property defines how items are spaced along the Main Axis (horizontally by default).

• flex-start: Items hug the left side (or top in columns).
• flex-end: Items hug the right side.
• center: Items are grouped in the middle.
• space-between: The first item is at the start, the last is at the end, and the rest are spread out.
• space-around: Items have equal space on both sides (the gap between items is double the gap at the edges).

Cross Axis Alignment

The align-items property defines how items are positioned along the Cross Axis (vertically by default).

• stretch: Items grow to fill the container height (default).
• flex-start: Items sit at the top.
• flex-end: Items sit at the bottom.
• center: Items are perfectly centered vertically.
• baseline: Items align based on the text inside them.

Example

css

.flex-container {
  display: flex;
  justify-content: center; /* Horizontally centered */
  align-items: center;     /* Vertically centered */
  height: 200px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

.flex-item {
  width: 60px;
  height: 60px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

html

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
</div>

Alignment in Grid Layout

CSS Grid is designed for 2D layouts (rows and columns simultaneously). It uses similar terminology to Flexbox but applies it to a grid of cells.

Grid Container Alignment

• justify-items: Aligns the content inside every grid cell along the row axis.
• align-items: Aligns the content inside every grid cell along the column axis.
• justify-content: Aligns the entire grid inside its container (if the grid is smaller than the container).
• align-content: Aligns the entire grid vertically within the container.

Example

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 10px;
  justify-content: center; /* Centers the whole grid in the page */
  align-items: center;     /* Centers content inside the cells */
  height: 300px;
  background-color: #eee;
}

.grid-item {
  background-color: #e67e22;
  color: white;
  padding: 20px;
  text-align: center;
}

html

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Summary

Alignment is a foundational skill in CSS. To choose the right property, first identify your context:

• Are you styling lines of text? Use text-align.
• Are you positioning an icon within a sentence? Use vertical-align.
• Are you building a navigation bar or a simple row of cards? Use Flexbox (justify-content/align-items).
• Are you building a full-page layout or a complex gallery? Use CSS Grid (place-items/justify-content).

By mastering these properties, you can ensure your layouts look professional and consistent across all screen sizes.