# ComboStrap Styling - Align Attribute

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