center ~ alignement vertical du contenu d'un bloc

Cette action permet de centrer verticalement le contenu saisi entre le shortcode ouvrant et le shortcode fermant. Les marges du premier et dernier élément sont annulées

Cette action "simple" facilite l'utilisation de la classe CSS up-center. Cette classe est utilisée par beaucoup d'actions de UP comme bg-slideshow.

Un exemple simple

Tout le contenu, bordé de vert, est centré dans le bloc principal bordé de rouge.
La marge haute du premier élément (h2) et la marge basse du dernier (p) sont mises à zéro pour que le contenu soit bien centré.

{up center=bd-vert;text-align:center 
  | style= min-height:200px;
           border:1px red dotted;
}
  <h2>un super produit</h2>
  <p>sa description ...</p>
  <p><a href="#" class="btn btn-primary">le bouton</a></p>
{/up center}

Avez-vous remarqué que pour l'option principale, on mélange allégrement des classes et des styles
C'est une nouvelle méthode introduite par la version 1.5 de UP pour les nouvelles actions. Il est possible de saisir des styles dans l'option class et vice-versa.
pour l'option style ci-dessus, j'aurais pu écrire : style=minh200;border:1px red dotted
La seule contrainte est qu'une classe soit séparée d'un style par un point-virgule.

Avec l'action flexbox

le lion

quel regard fascinant ...

{up flexbox==4-8 | tablet=4-8 | mobile=6-6 | class=bd-beige bg-beige}
  <img src="/images/actions-demo/center/lion.jpg">
  {========}
  {up center=mleft; padding-left:10px}
    <h2>le lion</h2>
    <p>quel regard fascinant ...</p>
  {/up center}
{/up flexbox}

Par défaut, le bloc du contenu est centré horizontalement. Pour le justifier à gauche ou à droite, il suffit d'ajouter la classe mleft ou mright à l'option principale pour jouer sur les marges du bloc interne. Il était aussi possible d'utiliser la justification horizontale du bloc parent flex, soit la classe UP : fg-left

Centrer en utilisant la classe up-center

Il est possible d'indiquer directement la classe utilisée comme argument de l'action flexbox. Il faut juste faire attention à conserver la structure des blocs :

1. le bloc parent qui définit la classe
2. le bloc qui englobe le contenu
3. le(s) contenu(s) pour lesquels on annule les marges

En cas de niveau manquant ou supplémentaire, l'annulation des marges ne fonctionnera pas.

Dans l'exemple de droite, la div qui englobe le contenu empêche l'annulation de la marge basse de la dernière ligne. Notez, que cela peut être utile dans certains cas!

le lion

quel regard fascinant ...

le lion

quel regard fascinant ...

{up flexbox=4-8 | class=fg-gap up-center bg-brun tcs | class-*=bd-rouge}
  <img src="/images/actions-demo/center/lion.jpg">
  {========}
  <h2>le lion</h2>
  <p>quel regard fascinant ...</p>
{/up flexbox}

{up flexbox=4-8 | class=fg-gap up-center bg-brun tcs | class-*=bd-rouge}
  <img src="/images/actions-demo/center/lion.jpg">
  {========}
  <div>
    <h2>le lion</h2>
    <p>quel regard fascinant ...</p>
  </div>
{/up flexbox}

fg-gap permet d'ajouter un espace entre les cellules.
tcs (Texte Centré sur Smartphone) permet d'avoir une justification différente du texte sur les petits écrans.
Ces classes ne sont pas spécifiques à cette action. Elles font partie de la feuille de base de UP