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 |}}

Powered by ComboStrap