Table of Contents

About

align is an styling attribute of the HTML superset component

It permits to align:

  • the content of a component
  • the component itself
  • its children

If you want more control on the position and space given, you need to use a grid

Syntax

The align attribute values may applies:

  • to the text inside
  • to the component itself
  • to the alignment of its children

Text

For text/inline/content

text-align is a typographic attribute that sets the alignment of the lines of text. 

<component align=text-value[-breakpoint] />

where:

  • the value may be:
    • start - left for a LTR language and right for a RTL language - (default)
    • center
    • end - right left for a LTR language and left for a RTL language
  • breakpoint defines a conditional value.

justify is not supported. While, aesthetically the text might look more appealing, it does make word-spacing more random and therefore harder to read.

Box itself

  • left or start (by default, the block is aligned to the left)
  • center,
  • right or end

The content will not flow along the box, if you want this behavior, you need to use the float attribute

Children

This value aligns the children. 

<component align={value}-children[-breakpoint] />

where:

  • the values may be:
    • x-center or center
    • x-between or between
    • x-end or end (right side for LTR or left side for RTL language)
    • x-start or start (left side for LTR or right side for RTL language)
    • x-end or end - right left for a LTR language and left for a RTL language
    • y-center
    • y-top
    • y-bottom
  • breakpoint defines a conditional value.

The result may collapse all space.

If this is the case, it means that the component does not support children alignement.

Why? Technically, the children align values should be used only against block children. If you use them against text/inline/content, the content just collpase.