ComboStrap Styling - Align Attribute
Table of Contents
About
align is an styling attribute of the HTML superset component
It permits to align a block on the horizontal axis.
If you want more control on the position, you may also use a grid
Syntax
The align attribute on a box, supports the values:
- 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
Example
With a container component
- Example:
A little bit of content that shows that the text will not flow along the aligned box. The ''aligned'' box will then be located after this text.
<note tip align="end" width="300px" text-align="center">
=== Block to the right ===
As every block by default takes the whole available [[dimension|width]], you need to add a [[dimension|width attribute]] when you want to align it.
</note>
- Output:
A little bit of content that shows that the text will not flow along the aligned box. The aligned box will then be located after this text.
Block to the right
As every block by default takes the whole available width, you need to add a width attribute when you want to align it.
Text
To align the text inside a block component, you use the text-align attribute.
Image
With a image, if you want to align it to the center, you would let a space after {{ and before }}. More information, see the image position section.
{{ :docs:block:stock_image_surfer_in_the_see.png?400 |}}