Syntax¶

Description: align is defined as a helper utility that aligns the element it is applied to relative to its parent element.

ctr('<#selector>', {
  align: <align:value>
})

<#selector>:
  align: <align:value>

<#selector> {
  <...>: <...>;
}

Notes

• align alias: alignSelf
• Similar to the non-flex grid align implementation just applied to the element itself rather than the child element

Bottom¶

Description: The value of 'bottom' centers the element horizontally at the bottom of the parent element.

ctr('.test', {
  width: 200px
  align: 'bottom'
})

.test:
  width: 200px
  align: bottom

.test {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, 0);
}

ctr('.test', {
  width: 200px
  align: 'bottom'
})

.test {
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, 0);
}

.test:
  width: 200px
  align: bottom

Notes

• 'bottom' alias: 'bottom-center' 'bc'

Bottom Left¶

Description: The value of 'bottom-left' aligns the element at the bottom left corner of the parent element.

ctr('.test', {
  width: 200px
  align: 'bottom-left'
})

.test:
  width: 200px
  align: bottom-left

.test {
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

ctr('.test', {
  width: 200px
  align: 'bottom-left'
})

.test {
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

.test:
  width: 200px
  align: bottom-left

Notes

• 'bottom-left' alias: 'bl'

Bottom Right¶

Description: The value of 'bottom-right' aligns the element at the bottom right corner of the parent element.

ctr('.test', {
  width: 200px
  align: 'bottom-right'
})

.test:
  width: 200px
  align: bottom-right

.test {
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

ctr('.test', {
  width: 200px
  align: 'bottom-right'
})

.test {
  right: 0;
  bottom: 0;
  top: auto;
  left: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

.test:
  width: 200px
  align: bottom-right

Notes

• 'bottom-right' alias: 'br'

Center¶

Description: The value of 'center' centers the element both vertically and horizontally.

ctr('.test', {
  width: 200px
  align: 'center'
})

.test:
  width: 200px
  align: center

.test {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, -50%);
}

ctr('.test', {
  width: 200px
  align: 'center'
})

.test {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.test:
  width: 200px
  align: center

Notes

• 'center' alias: 'middle' true

Center Left¶

Description: The value of 'center-left' centers the element vertically at the left side of the parent element.

ctr('.test', {
  width: 200px
  align: 'center-left'
})

.test:
  width: 200px
  align: center-left

.test {
  left: 0;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, -50%);
}

ctr('.test', {
  width: 200px
  align: 'center-left'
})

.test {
  left: 0;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, -50%);
}

.test:
  width: 200px
  align: center-left

Notes

• 'center-left' alias: 'left' 'cl'

Center Right¶

Description: The value of 'center-right' centers the element vertically at the right side of the parent element.

ctr('.test', {
  width: 200px
  align: 'center-right'
})

.test:
  width: 200px
  align: center-right

.test {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, -50%);
}

ctr('.test', {
  width: 200px
  align: 'center-right'
})

.test {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, -50%);
}

.test:
  width: 200px
  align: center-right

Notes

• 'center-right' alias: 'right' 'cr'

Top¶

Description: The value of 'top' centers the element horizontally at the top of the parent element.

ctr('.test', {
  width: 200px
  align: 'top'
})

.test:
  width: 200px
  align: top

.test {
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, 0);
}

ctr('.test', {
  width: 200px
  align: 'top'
})

.test {
  top: 0;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(-50%, 0);
}

.test:
  width: 200px
  align: top

Notes

• 'top' alias: 'top-center' 'tc'

Top Left¶

Description: The value of 'top-left' aligns the element at the top left corner of the parent element.

ctr('.test', {
  width: 200px
  align: 'top-left'
})

.test:
  width: 200px
  align: top-left

.test {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

ctr('.test', {
  width: 200px
  align: 'top-left'
})

.test {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

.test:
  width: 200px
  align: top-left

Notes

• 'top-left' alias: 'tl'

Top Right¶

Description: The value of 'top-right' aligns the elements at the top right corner of the parent element.

ctr('.test', {
  width: 200px
  align: 'top-right'
})

.test:
  width: 200px
  align: top-right

.test {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

ctr('.test', {
  width: 200px
  align: 'top-right'
})

.test {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: 200px;
  position: absolute;
  transform: translate(0, 0);
}

.test:
  width: 200px
  align: top-right

Notes

• 'top-right' alias: 'tr'

Example¶

Description: Locations of the align values.

Notes

• Hint: if you can not get this to work, make sure your parent element position property is set to relative