Centrage des éléments

Il est délicat de centrer les éléments
Toutes les démos ci-dessous utilisent des actions UP à la place des balises HTML. Cela permet de bien voir les classes et styles utilisés.
Vous trouverez plus d'informations sur leur page de démonstration : div ~ un bloc visible en wysiwyg, html ~ saisir du html en mode wysiwyg 
Attention, j'insère des espaces entre les shortcodes dans les exemples de code uniquement pour voir l'imbrication des codes.
C'est une méthode à ne pas suivre. Ces espaces qui font partie du contenu risquent de perturber le rendu.
Par contre, vous pouvez mettre des sauts de lignes dans les shortcodes.

Action center

Les shortcodes

{up center=bd-vert tc p2}
{up html=h4.bd-red }LE TITRE{/up html}
{up lorem=1 | max-word=12 | class=mv1}
{up html=a | href=#  | class=btn btn-primary}le bouton{/up html}
{/up center}

Le résultat

LE TITRE

Excepteur sit officia ad labore ex occaecat in nostrud laboris exercitation deserunt
le bouton

Commentaires

Une solution efficace. En dehors des ajouts de classes cosmétiques, tc centre horizontalement tout le contenu.

La classe up-center

La même chose sans utiliser l'action center. Cela est utile quand il est impossible d'utiliser une action UP.

Les shortcodes

{up div=up-center bd-vert tc p2}
  {up div}
    {up html=h4.bd-red }LE TITRE{/up html}
    {up lorem=1 | max-word=12 | class=mv1}
    {up html=a | href=#  | class=btn btn-primary}le bouton{/up html}
  {/up div}
{/up div}

Le résultat

LE TITRE

Lorem ad non ut sit minim ea ullamco incididunt elit, anim aute
le bouton

Commentaires

Il suffit d'attribuer la classe up-center au bloc externe.

Un bloc interne est utilisé pour regrouper tous les éléments à centrer

Les classes flex

Les shortcodes

{up div=fg-row fg-vcenter fg-center bd-vert tc p2}
{up html=h4.mv0.w100.bd-red}LE TITRE{/up html}
{up lorem=1 | max-word=12 | class=mv1}
{up html=a | href=#  | class=btn btn-primary}le bouton{/up html}
{/up div}

Le résultat

LE TITRE

aliqua. cillum irure commodo consectetur labore voluptate elit, ea ut adipiscing anim
le bouton

Commentaires

Action box

Les shortcodes

{up box=onimage
 | title=Le titre
 | subtitle=Le sous titre
 | image=images/actions-demo/box/engrenage.jpg
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Le résultat

Le titre

Le sous titre

Lorem ipsum dolor sit amet, ...

En savoir +

Commentaires

L'action box offre un choix de rendu. Même si la saisie du shortcode peut troubler, la relecture est aisée et compense cette difficulté.

Détails