CSS: Align

The term "align" in CSS can refer to several different properties used for alignment in various contexts, including text alignment, vertical alignment, and alignment within flexible or grid layouts. Here are some of the primary ways alignment is handled in CSS:

Text Alignment

The text-align property is used to set the horizontal alignment of inline content (like text) within a block-level element.

Values

• left: Aligns the text to the left.
• right: Align the text to the right.
• center: Centers the text.
• justify: Stretches the text so that each line has an equal width, and the lines are filled out evenly.

Example

css

.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.</p>
<p class="text-right">This text is right-aligned.</p>
<p class="text-justify">This text is justified, meaning it is stretched so that each line has equal width.</p>

Vertical Alignment

The vertical-align property is used to set the vertical alignment of an inline or table-cell box.

Values

• baseline: Aligns the baseline of the element with the baseline of its parent (default).
• top: Align the top of the element with the top of the tallest element on the line.
• middle: Align the middle of the element with the middle of the tallest element on the line.
• bottom: Align the bottom of the element with the lowest element on the line.
• text-top: Aligns the top of the element with the top of the parent element's font.
• text-bottom: Aligns the bottom of the element with the bottom of the parent element's font.

Example

css

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

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

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

html

<span class="vertical-top">Top aligned</span>
<span class="vertical-middle">Middle aligned</span>
<span class="vertical-bottom">Bottom aligned</span>

Alignment in Flexbox

Flexbox provides several properties for alignment along both the main axis and the cross axis.

Main Axis Alignment

• justify-content: Aligns items along the main axis.
  • flex-start: Items are packed toward the start of the flex container (default).
  • flex-end: Items are packed toward the end of the flex container.
  • center: Items are centered along the main axis.
  • space-between: Items are evenly distributed; the first item is at the start and the last item is at the end.
  • space-around: Items are evenly distributed with equal space around them.

Cross Axis Alignment

align-items: Aligns items along the cross axis.

• stretch: Items stretch to fill the container (default).
• flex-start: Items are packed toward the start of the cross-axis.
• flex-end: Items are packed toward the end of the cross-axis.
• center: Items are centered along the cross-axis.
• baseline: Items are aligned such that their baselines align.

align-self: Allows the default alignment set by align-items to be overridden for individual flex items.

Example

css

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: steelblue;
}

html

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

Alignment in Grid Layout

CSS Grid also provides several properties for alignment.

Grid Container Alignment

• justify-items: Aligns grid items along the inline (row) axis.
• align-items: Aligns grid items along the block (column) axis.
• justify-content: Aligns the grid within the grid container along the inline (row) axis.
• align-content: Aligns the grid within the grid container along the block (column) axis.

Example

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

.grid-item {
  background-color: steelblue;
  width: 50px;
  height: 50px;
}

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

The concept of "align" in CSS encompasses several properties tailored to different types of alignment:

• text-align for horizontal text alignment.
• vertical-align for vertical alignment of inline or table-cell elements.
• justify-content and align-items for main and cross-axis alignment in Flexbox.
• justify-items, align-items, justify-content, and align-content for alignment in Grid Layouts.

Understanding these properties allows you to control the positioning and layout of elements in your web design effectively.