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

➠ center : Centre tous les blocs enfants en supprimant les margins superflus

Cliquer pour lire la documentation

syntaxe {up center=classe(s)}contenu{/up center}
author LOMART version 1.0 license GNU/GPLv3
  • center: classe(s) et style(s) pour le bloc interne (celui qui est centré)
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • base-css: règles CSS définies par le webmaster (ajout dans le head)

    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

    une super action

    sa description ...

    le bouton

    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}
    

    Il est nécessaire d'ajouter quelques styles pour visualiser l'effet :

    • l'option principale center accepte comme argument des classes et des styles pour enrichir le contenu
    • style, comme de coutume avec UP, met en forme le bloc principal
      • min-height permet de donner de l'espace pour centrer verticalement
      • border pour visualiser l'emplacement

    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 | class=fg-gap bd-beige}
      <img src="images/actions-demo/center/lion.jpg">
      {========}
      {up center=mleft; padding-left:10px | style=bg-beige}
        <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