LayoutAlign

LayoutAlign lets you align contents both horizontally and vertically.

paddingTop : 5

paddingBottom : 5

paddingLeft : 5

paddingRight : 5

horizontalAlign

left center right stretch

verticalAlign

top center bottom stretch

reset

content

||

Usage

• Place your contents between <LayoutAlign> tags
• Use horizontal-align to align contents left, center or right
• When the height of LayoutAlign is determined, use vertical-align to align contents top, center or bottom

<LayoutAlign padding-x="5" padding-y="5" horizontal-align="right" vertical-align="bottom" style="border: 1px solid; height: 200px;" > <button>Cancel</button> <button>Save</button> </LayoutAlign>

<LayoutAlign
	padding-x="5"
	padding-y="5"
	horizontal-align="right"
	vertical-align="bottom"
	style="border: 1px solid; height: 200px;"
>
	<button>Cancel</button>
	<button>Save</button>
</LayoutAlign>

Props

• padding props

Property	Description	Type	Default	Value
horizontalAlign	horizontal align contents	String	stretch	left, center, right, stretch
verticalAlign	vertical align contents	String	top	top, center, bottom, stretch