---json
{
    "page_id": "1gzrs9c6wwea6rgior78r"
}
---
====== ComboStrap Styling - Align Attribute ======



===== About =====
''align'' is an [[docs:styling:styling|styling attribute]] of the [[docs:marki|HTML superset component]]

It permits to align:
  * the content of a component
  * the component itself
  * its children

<note tip align="center">
If you want more control on the position and space given, you need to use a [[docs:layout:component:grid|grid]]
</note>


===== Syntax =====

The ''align'' attribute values may applies:
  * to the text inside
  * to the component itself
  * to the alignment of its children

==== Text ====
For [[:docs:content:content|text/inline/content]]

''text-align'' is a [[docs:content:typo|typographic attribute]] that sets the alignment of the lines of text.


<code dw>
<component align=text-value[-breakpoint] />
</code>
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 [[:docs:styling:conditional|conditional value]].

<note>
''justify'' is not supported. While, aesthetically the text might look more appealing, it does make word-spacing more random and therefore harder to read.
</note>
==== Box itself ====


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

<note>
The content will not flow along the box, if you want this behavior, you need to use the [[docs:styling:float|float attribute]]
</note>

==== Children ====

This value aligns the children.

<code dw>
<component align={value}-children[-breakpoint] />
</code>
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 [[:docs:styling:conditional|conditional value]].

<note warning>
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 [[:docs:block:block|block]] children. 
If you use them against [[:docs:content:content|text/inline/content]], the content just collpase.
</note>