ComboStrap Styling - Align Attribute

Undraw My Documents

About

align is an styling attribute of the HTML superset component

It permits to align:

  • the content of a component
  • the component itself
  • its children

If you want more control on the position and space given, you need to use a grid

Syntax

The align attribute values may applies:

  • to the text inside
  • to the component itself
  • to the alignment of its children

Text

For text/inline/content

text-align is a typographic attribute that sets the alignment of the lines of text.

<component align=text-value[-breakpoint] />

where:

  • the value may be:
    • start - left for a LTR language and right for a RTL language - (default)
    • center
    • end - right left for a LTR language and left for a RTL language
  • breakpoint defines a conditional value.

justify is not supported. While, aesthetically the text might look more appealing, it does make word-spacing more random and therefore harder to read.

Box itself

  • 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

Children

This value aligns the children.

<component align={value}-children[-breakpoint] />

where:

  • the values may be:
    • x-center or center
    • x-between or between
    • x-end or end (right side for LTR or left side for RTL language)
    • x-start or start (left side for LTR or right side for RTL language)
    • x-end or end - right left for a LTR language and left for a RTL language
    • y-center
    • y-top
    • y-bottom
  • breakpoint defines a conditional value.

The result may collapse all space.

If this is the case, it means that the component does not support children alignement.

Why? Technically, the children align values should be used only against block children. If you use them against text/inline/content, the content just collpase.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to align a text ?

This howto will show you how you can align your text. With ComboStrap, text alignment is only defined via the align attribute. There is three possible alignement: , ie left for a left-to-right...
Undraw Animating
How to align a text based on screen size ?

This howto shows you how to apply a text alignment that depends on the screen size. In the text align howto, you have learned to apply one of the tree possible text alignment. In this howto, you will...
Undraw Animating
How to center a box component ?

This howto shows you how to center a box component.
Undraw Animating
How to center a link or a button ?

This how to will show you how to center a link. A link can be styled via its properties and because a link is a also a type of button, this page shows you the two possibilities. A link is a phrase...
Undraw Animating
How to center an image ?

This howto show you how to center an image. To center an image there is two possibilities: with the and with the With the space syntax, to center an image, you add a space after {{ and before...
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout.


Recommended Pages
Undraw My Documents
ComboStrap - Text component - Apply text typographic effects

The text component lets you apply text typographic effects on one ore more paragraph.
Undraw My Documents
ComboStrap Styling - Dimension (Width and Height)

Every Box components and even the whole main page dimension may be resized with the styling attributes: and . The width attributes support the following values: length - a length (in pixel,...
Undraw Website Builder Re Ii6e
ComboStrap UI - Box

A box is a component that permits to contain other components. This is useful to: define the elements that should collapse or create a styled box. layout componenttext component Align Background-Color...
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Undraw My Documents
ComboStrap UI - Note

note is a ComboStrap UI component that shows a text that is parenthetic or ancillary to the main text. where: title is a title type may have one of the following value: (Default) ...
Undraw My Documents
ComboStrap UI - Styling

Styling in ComboStrap is the possibility to render every component as you wish. ComboStrap has three levels of styling: the bootstrap stylesheet level - bootstrap standard theme the user stylesheet...
Undraw My Documents
Float an element in ComboStrap

Float permits to print text along the side of a component
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.



Task Runner